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内 容 提 要 


本 书 堪 称 Angular 领域 的 里 程 碑 式 著作 ， 涵 盖 了 关于 Angular 的 几乎 所 有 内 容 。 对 于 没有 经 验 的 人 ， 本 














书 平实 、 通 俗 的 讲解 ， 递 进 、 严 密 的 组 织 ， 可 以 让 人 毫 无 压力 地 登 堂 入室 ， 迅 速 领悟 新 一 代 Web 应 用 开发 
的 精通。 如果 你 有 相关 经 验 ， 那 本 书 对 Angular 概念 和 技术 细节 的 全 面 剖析 ， 以 及 引人入胜 、 切 中 肯 移 的 讲 
解 ， 将 帮助 你 彻底 掌握 这 个 框架 








， 在 自己 职业 技术 修炼 之 路 上 更 进一步 。 





本 书 的 读者 对 象 为 所 有 想 要 理解 和 学 习 Angular 的 前 端 开 发 人 员 。 
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版 权 声明 


Original edition, entitled ng-book 2: The Complete Book on Angular 2. Copyright © 2015 - 2017 
Felipe Coury, Ari Lerner, Nate Murray & Carlos Taborda. 


Simplified Chinese translation copyright O 2017 by Posts & Telecom Press. 


All rights reserved. No part of this book may be reproduced or transmitted in any form or by any 
means, electronic or mechanical, including photocopying, recording or by any information storage and 


retrieval system, without permission in writing from Fullstack.1o. 


本 书简 体 中 文 版 由 Felipe Coury, Ari Lerner, Nate Murray & Carlos Taborda 授权 人 民 邮 电 出 版 
社 独 家 出 版 。 未 经 出 版 者 许可 ， 不 得 以 任何 方式 复制 本 书 内 容 。 


仅 限 于 中 华人 民 共和 国境 内 ( 中 国 香港 、 澳 门 特别 行政 区 和 台湾 地 区 除外 ) 销售 发 行 。 
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E d F 


很 高 兴 这 本 《Angular 权 威 教程 》 成 为 Angular 中 文 资源 的 一 部 分 ， 希望 它 能 广 受 欢迎 ， 给 中 
的 Angular 社 区 提供 一 份 令 人 愉悦 的 学 习 资 源 ， 也 希望 它 帮助 更 多 工程 师 开 始 使 用 下 一 代 
Angular 框 架 来 开发 应 用 。 

我 认识 雪 狼 和 他 所 属 的 Nice Angular 社 区 是 在 2016 年 。 那 时 候 ， 他 们 开始 了 对 Angular 官 方 网 
站 卓越 的 本 地 化 工作 。 现 在 ， 这 份 中 文官 网 已 经 部 署 在 了 angular.cn 上 。 

本 书 及 其 翻译 工作 充分 体现 了 中 国 开源 软件 开发 者 的 热情 和 共享 精神 。 感谢 雪 狼 等 来 自 Nice 
Angular 社 区 的 志愿 者 们 对 此 作出 的 贡献 。 愿 本 书 帮 助 你 开始 试用 Angular! 祝 你 成 功 ! 


Naomi Black，Google Angular 项 目 经 理 兼 主管 
































作为 一 项 开源 技术 和 前 沿 Web 开 发 框架 , Angular 持 续 吸 引 着 中 国 区 开发 人 员 的 关注 。 作 为 雪 
狠 及 其 所 属 Nice Angular 社 区 的 集体 工作 成 果 ,， 这 本 书 是 开源 力量 的 又 一 次 证 明 , 证 明 这 种 热情 、 
这 种 志愿 精神 确实 可 以 帮助 业界 享受 到 全 球 最 新 的 开发 技术 。 我 谨 代 表 Google 开 发 技术 推广 部 向 
这 本 书 的 出 版 表示 祝贺 。 





























栾 跃 ，Google 开 发 技术 推广 部 大 中 华 区 主管 


图 灵 社 区 会 员 xiaochao12312312ff(499290328(9 qq.com) 专 享 尊重 版 权 


简介 

以 笔者 之 所 见 ,《Angular 权 威 教程 》 大 概 是 目前 除了 Angular 官 方 文档 之 外 最 全 面 的 学 习 资 料 
了 ， 这 从 其 英文 版 多 达 600 多 页 的 篇 幅 就 可 见 一 斑 。 相 应 地 ， 它 面 对 的 对 象 涵盖 了 从 入 门 级 到 中 
高 级 的 读者 ， 是 一 本 可 以 陪伴 你 成 长 的 好 书 。 

在 内 容 安排 上 , 本 书 具 有 大 量 的 例子 以 保障 其 足够 浅显 , 但 也 穿插 着 一 些 原理 分 析 以 保障 其 
足够 深入 , 除 此 之 外 , 本 书 还 给 出 了 很 多 外 部 参考 资料 , 让 富有 探险 精神 的 你 可 以 向 专家 级 进发 。 




















翻译 说 明 
未 来 的 版 本 号 及 发 布 计划 





Angular 就 要 出 4.0 了 ! 是 的 ， 过 一 阵子 还 有 Angular 5/6/7/8------ BAR"? 答案 是 
“不 会 "。Angular 开 发 组 对 于 未 来 的 版 本 号 及 发 布 计划 有 一 个 正式 的 说 明 ， 大 意 是 : 


我 们 要 兼顾 向 后 兼容 和 向 前 演进 ， 因 此 以 后 我 们 将 严格 遵循 SemVer 语 义 化 版 本 规 

范 ， 并 力求 让 版 本 升级 变 得 可 预测 ， 以 便 使 用 者 可 以 提前 安排 。 在 大 版 本 号 之 间 会 出 现 

少量 破坏 性 变更 ， 但 是 不 用 担心 ， 相 邻 的 大 版 本 号 之 间 只 会 把 一 些 API 标 记 为 废弃 的 。 

也 就 是 说 , 理想 情况 下 ,4 的 程序 是 可 以 直接 迁移 到 5 的 ， 只 是 会 收 到 一 些 API 废 弃 提 示 ， 

到 6 中 才 会 彻底 移 除 。 同 时 ， 官 方 会 在 文档 中 给 出 详细 的 升级 指南 ， 帮 助 开发 者 升级 。 

因此 ， 尽 请 放心 ，Angular 以 后 绝 不 会 出 现 像 从 1 升级 到 2 这 么 大 的 变化 。 事 实 上 ，NodeJS 现 
在 采用 的 就 是 类 似 的 版 本 策略 ， 提 高 发 布 的 可 预测 性 对 于 工程 化 开发 是 很 有 价值 的 。 

另外 ， 这 里 为 什么 没有 3? 简单 点 说 就 是 因为 路 由 模块 比 其 他 模块 多 发 布 过 一 次 ， 因 此 当 你 
使 用 core 模 块 的 2.0 时 ， 和 它 配套 的 router 模 块 却 是 3.0 的 ,这 容易 让 开发 人 员 困 惑 ， 跳 过 3， 可 以 让 
所 有 模块 的 编号 重新 对 齐 。 
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对 框架 名 称 的 说 明 


Angular 开 发 组 正式 确定 了 新 的 命名 策略 : 用 AngularJS 来 代表 1.x 版 本 ， 而 Angular 代 表 2.x、 
4.x、5.x 等 很 多 后 续 版 本 ， 因 为 Angular 2+ 将 支持 TypeScript/JavaScript/Dart， 而 不 再 是 JavaScript。 
这 些 变 化 已 经 在 官方 文档 中 体现 出 来 了 ， 而 本 书 也 将 同样 遵循 这 样 的 命名 策略 。 


名 词 : 装饰 器 与 注解 


@Component 等 语法 元 素 在 TypeScript 中 被 称 为 装饰 器 ( decorator )， 但 在 本 书 中 ， 作 者 统一 称 
其 为 注解 (annotation )。 这 两 种 提 法 都 是 正确 的 。 在 语法 层面 ，@Component 确 实 是 装饰 器 ， 这 是 
TypeScript 的 标准 叫 法 ; 但 是 在 语义 层面 ，Angular 中 是 把 它 作 为 注解 使 用 的 。 两 者 的 区 别 是 ， 装 
饰 器 直接 改变 被 装饰 者 的 行为 ， 而 注解 则 提供 元 数据 ， 供 框架 去 根据 这 些 元 数据 做 不 同 的 处 理 。 
在 Angular 目 前 的 版 本 中 ，@Component 确 实 只 是 提供 了 元 数据 。 


我 们 在 跟 原 作者 讨论 之 后 , 决定 还 是 跟随 作者 的 提 法 来 翻译 。 不 过 在 日 常 工作 中 ,还 是 建议 
你 遵循 TypeScript 的 提 法 ， 将 其 称 为 装饰 器 。 




































































支持 与 勘误 
如 果 对 本 书 中 的 一 些 概念 不 太 理解 ， 请 参阅 Angular 官 方 中 文 站 angularcn。 这 里 有 来 自 官 方 
开发 组 的 权威 资料 。 
如 果 对 本 书 有 任何 疑问 或 发 现 问 题 ， 请 到 https://github.com/nice-angular/ng-book-2 提 交 issue。 
同时 ， 对 于 一 些 经 过 确认 的 issue， 我 们 也 会 更 新 在 勘误 区 。 





























关于 我 们 

参与 本 次 翻译 的 一 共有 7 位 成 员 , 都 是 AngularJS 领 域 的 专家 和 Angular 领 域 的 先行 者 。 稍 后 会 
有 我 们 的 简短 介绍 。 

本 书 各 章 的 译 者 和 校对 者 如 下 : 











翻译 一 校 二 校 
第 1 章 雪 狼 、 叶 志 敏 郑 丰 或 郑 丰 或 
第 2 章 破 狼 破 狼 雪 狼 
第 3 章 张 旋 张 旋 雪 狼 
第 4 章 郑 丰 或 郑 丰 或 雪 狼 
第 5 章 破 狼 破 狼 雪 狼 
第 6 章 王子 实 王子 实 雪 狼 
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(E) 
翻译 一 校 二 校 
第 7 章 叶 志 敏 叶 志 敏 叶 志 敏 
T E E E 
第 9 章 郑 丰 或 HER ap 
第 10 章 郑 丰 或 郑 丰 或 Hantsy 
第 11 章 郑 丰 或 郑 丰 或 Hantsy 
第 12 章 郑 丰 或 郑 丰 或 ES 
第 13 章 郑 丰 或 郑 丰 或 SR 
第 14 章 HER 郑 丰 或 雪 狠 
第 15 章 Hantsy Hantsy Ir 
第 16 章 雪 狼 雪 狼 张 旋 








除 此 之 外 , 雪 狼 还 承担 了 项 目 管理 和 中 文 统 稿 工作 ; 破 狼 负责 全 书 的 技术 准确 性 把 关 ; 叶 志 
人 敏 负责 与 作者 沟通 ， 并 在 英文 理解 方面 进行 把 关 。 





























我 们 的 感恩 


本 书 得 以 发 行 ， 首 先 要 感谢 Angular 开 发 组 及 其 项 目 经 理 Naomi Black。 正 是 由 于 她 的 支持 和 
牵线 搭桥 ， 才 有 了 我 们 和 图 灵 的 这 次 合作 。 

我 们 还 要 感谢 Google 开 发 技术 推广 部 及 其 大 中 华 区 主管 蛮 跃 和 项 目 经 理 程 路 , 正 是 由 于 他 们 
的 努力 ， 让 Angular 在 中 国 的 推广 普及 工作 有 了 正规 军 的 加 入 ， 而 本 书 的 出 版 正 是 推广 计划 中 的 
一 小 部 分 。 

我 们 还 要 感谢 图 灵 的 编辑 朱 儿 和 杨 琳 , 在 整个 翻译 过 程 中 , 她 们 给 了 我 们 许多 专业 的 指导 和 
帮助 。 本 书 得 以 在 迅速 出 版 的 同时 保证 高 质量 ， 她 们 的 经 验 和 把 关 居 功 甚 伟 。 

最 后 ， 要 感谢 Angular 中 文 社区 。 我 所 指 的 并 不 是 由 我 们 几 个 创建 并 管理 的 这 些 QQ 群 、 微 信 
群 等 ， 而 是 指 广义 的 中 文 社 区 。 无 论 你 在 北京 还 是 上 海 , 也 无 论 你 在 国内 还 是 海外 ; 无 论 你 是 高 
手 还 是 新 兵 ， 也 无 论 你 是 否 像 我 们 一 样 是 Angular 的 忠实 粉丝 ， 你 们 都 是 广义 Angular 中 文 社 区 中 
的 一 员 。 在 我 们 的 心中 ， 只 有 一 个 Angular 中 文 社 区 ， 她 不 被 任何 人 拥有 ， 也 被 每 一 个 人 拥有 ， 
因为 她 就 是 我 们 每 个 人 。 


固然 ,我们 这 几 位 译 者 都 是 推广 Angular 的 志愿 者 与 先行 者 ， 但 我 们 真正 希望 看 到 的 是 一 个 
繁 来 、 开 放 、 互 通 的 中 文 社区 ， 是 全 球 Angular 社 区 的 一 部 分 ， 我 们 希望 看 到 Angular 的 技术 社区 
人 遍地开花。 因此， 如 果 你 有 自己 的 组 织 或 影响 力 ， 请 联系 我 们 ,我 们 愿 与 你 携手 共 进 , 分 享 各 种 
知识 、 渠 道 与 资源 ,共同 制定 与 推进 社区 发 展 计划 。 要 知道 ,无 论 你 将 来 是 求职 还 是 创业 ,一 个 
繁荣 的 社区 都 会 给 你 带 来 强力 的 文 持 。 
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一 旦 有 了 共同 的 愿景 和 开放 、 包容 的 文化 , 我 们 就 能 无 视 时 空 的 阻隔 , 在 天 南海 北 守 望 相 助 ， 
共同 面 对 新 技术 的 挑战 与 机 遇 。 纷繁 的 世界 、 冰 冷 的 技术 与 温 暧 的 社区 ,共同 构成 了 本 书 的 出 版 


db E 
H Ato 





雪 狼 的 感恩 
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同时 也 要 感谢 其 他 参与 翻译 的 译 者 们 , 让 我 有 了 这 次 非常 宝贵 的 经 验 。 尤 其 是 在 翻译 过 程 中 
遇 到 一 些 技术 问题 以 及 对 原 书 内 容 有 一 些 疑惑 时 ， 大 家 探究 与 实践 的 精神 让 我 印象 深刻 。 
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编写 你 的 第 一 个 Angular 
Web 应 用 








1.1 仿制 Reddit 网 站 
在 本 章 中 ,我 们 将 构建 一 个 应 用 ， 它 能 让 用 户 发 表 推荐 文章 (包括 标题 和 URL ) 并 对 每 篇 文 
章 投 票 。 
你 可 以 把 该 应 用 看 作 类 似 于 Reddit "或 Product Hunt2 的 起 步 版 网 站 。 
这 个 简单 的 应 用 将 涵盖 Angular 中 的 大 部 分 基本 要 素 ， 包括 : 
口 构建 自 定 义 组 件 ; 
口 从 表单 中 接收 用 户 输入 ; 
口 把 对 象 列表 泻 染 到 视图 中 ; 
a 拦截 用 户 的 点 击 操作 ， 并 据 此 作出 反应 。 
读 完 本 章 之 后 ， 你 将 掌握 如 何 构建 基本 的 Angular 应 用 。 
1-1 展 示 了 该 应 用 最 终 完成 后 的 界面 截图 。 
首先 ， 用户 将 提交 一 个 新 的 链接 。 之 后 ， 其 他 用 户 可 以 对 每 篇 文章 投票 :“ 顶 ”或 “ 躁 ”。 
个 链接 都 有 一 个 最 终 得 票数 ,我们 可 以 对 自己 认为 有 用 的 链接 投票 ( 如 图 1-2 所 示 )。 

















(D http://reddit.com 
@ http://producthunt.com 
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编写 你 的 第 一 个 Angular Web 应 用 








® OO / T anguarz- Simpi Regat > L notbook | 
€ > Q D locathost:8080 WE 








ws» Angular 2 Simple Reddit 


Adda Link 
Title: 


iPad Game for Cats 


Link: 


| http;//ipadgameforcats.com| | 


(angulario) 


Angular2 
3 


EN ^ upvote YY downvote 
Fullstack 
2 (fullstack.io) 
POINTS 个 upvote wẹ downvote 
Angular Homepage 
1 (angular.io) 
POINTS 


^ upvote + downvote 








图 1-1 完成 后 的 应 用 

















© 0 @ /Tovera- Simpie Resat x p 
€ > CŒ D localhost:8080 2z 
ngbook2 Angular 2 Simple Reddit 
Adda Link 
Title: 
Link: 
Angular 2 
O (angular.io) 
Sh 个 upvote 由 downvote 
iPad Game for Cats 
4 lipadgameforcats.com) 
PONT 个 upvote w downvote 
Angular Homepage 
3 (angulario) 
PONTS 个 upvote w downvote 








—— e 
图 1-2 包含 新 文章 的 应 用 
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12 起步 3 











在 本 项 目 和 整 本 书 中 ， 我 们 都 将 使 用 TypeScript。TypeScript 是 JavaScript ES6 版 的 一 个 超 集 ， 
增加 了 类 型 支持 。 本 章 不 会 深入 讲解 TypeScript; 如 果 你 熟悉 ES5 (“普通 ”的 JavaScript ) 或 ES6 
( ES2015 )， 那 么 在 后 续 的 学 习 过 程 中 应 该 不 会 有 什么 问题 。 


在 第 2 章 中 ， 我 们 将 更 深入 地 学 习 TypeScript。 因 此 ， 即 使 你 对 某 些 新 语法 不 太 熟悉 ， 也 不 必 
担心 o 





1.2 ”起步 


1.2.1 TypeScript 


要 开始 使 用 TypeScript， 首 先 需要 安装 Node.js。 安 装 方式 很 多 ， 请 参见 Node.js 官 方 网 站 
( https://nodejs.org/download/ ) 了 解 详 情 。 


o 我 必须 用 TypeScript 吗 ? 并 非 如 此 ! 要 使 用 Angular，TypeScript 并 不 是 必需 的 ， 
但 它 可 能 是 最 好 的 选择 。Angular 也 有 一 套 ES5 API， 但 Angular 本 身 就 是 用 
TypeScript 写 成 的 ， 所 以 人 们 一 般 也 会 选用 它 。 本 书 也 将 使 用 TypeScript， 因 为 
它 确 实 很 棒 ， 能 让 Angular 写 起 来 更 简单 。 当 然 ， 并 不 是 非 它 不 可 。 


安装 完 Node.js， 接 着 就 要 安装 TypeScript 了 。 请 确保 安装 1.7 或 更 高 的 版 本 。 要 想 安装 它 ， 请 
运行 下 列 npm 命 令 : 


$ npm install -g typescript 


e 通常 ，npm 是 Node,js 的 一 部 分 。 如 果 你 的 系统 中 没有 npm 命 令 ， 请 确认 你 安装 的 
Node.js 是 包含 它 的 版 本 。 


A Windows 用 户 : 我 们 将 在 全 书 中 使 用 Linux/Mac 风 格 的 命令 行 。 强 烈 建议 你 安装 
Cygwin"。 借 助 它 ， 你 就 能 直接 运行 本 书 中 的 这 些 命令 了 。 


1.2.2 angular-cli 








Angular 提 供 了 一 个 命令 行 工具 angular-cli,， 它 能 让 用 户 通过 命令 行 创建 和 管理 项 目 。 它 自 
动 化 了 一 系列 任务 ， 比 如 创建 项 目 、 添 加 新 的 控制 器 等 。 多 数 情况 下 ， 选 用 angular-cli 都 是 明 














(D https://www.cygwin.com/ 
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智 的 决定 。 当 你 创建 和 维护 应 用 时 ， 它 能 帮 你 遵循 很 多 常用 模式 。 

要 想 安 装 angular-cli ， 只 要 运行 下 列 命令 即 可 : 

$ npm install -g angular-cli81.0.0-beta.18 

安装 完毕 之 后 ， 你 就 可 以 在 命令 行 中 用 ng 命令 运行 它 了 。 运行 ng 命令 时 ,你 会 看 到 一 大 堆 输 
出 ， 不 过 不 用 管 它 ; 往 回 滚屏 ， 你 会 看 到 如 下 内 容 : 

$ ng 

Could not start watchman; falling back to NodeWatcher for file system events. 


Visit http://ember-cli.com/user-guide/swatchman for more info. 
Usage: ng «command (Default: help)» 


之 所 以 得 到 这 一 大 堆 输 出 ， 是 因为 当 我 们 不 带 参数 运行 hg 命令 时 ， 它 就 会 执行 默认 的 help 
命令 。help 命 令 会 解释 如 何 使 用 本 工具 。 

如 果 你 在 OS X 或 Linux 上 运行 ， 可 能 还 会 在 输出 中 看 到 这 一 行 : 

Could not start watchman; falling back to NodeWatcher for file system events. 


这 意味 着 我 们 没有 安装 过 一 个 名 叫 watchman 的 工具 。 此 工具 能 帮助 angular-cli 监听 文件 系 
统 的 变化 。 如 果 你 在 OS X 上 运行 ， 建 议 使 用 Homebrew 工 具 安装 它 ， 命 令 如 下 : 


$ brew install watchman 









































e 如 果 你 是 OSX 用 户 并 且 运行 这 个 brew 命 令 时 出 现 错误 ， 那 么 表示 你 尚未 正确 安 
装 Homebrew 工 具 。 请 参阅 http://brew.sh/ 来 安装 它 ， 然 后 再 试 一 次 。 
如 果 你 是 Linux 用 户 , 可 以 参阅 https://ember-cli.com/user-guide/#watchman 来 学 习 


如 何 安装 watchman。 
如 果 你 是 Windows 用 户 ， 那 么 不 必 人 安装 任何 东西 ，angular-cli 将 使 用 原生 的 
Node.js 文 件 监视 器 。 


现在 你 应 该 已 经 装 好 angular-cli 及 其 依赖 了 。 在 本 章 中 ， 我 们 就 用 它 来 创建 第 一 个 应 用 。 





1.2.3 ”示例 项 目 
现在 ， 环 境 已 经 准备 好 了 ， 我 们 这 就 来 编写 第 一 个 Angular 应 用 吧 
打开 终端 窗口 并 且 运 行 ng _ new 命令， 快速 创建 一 个 新 的 项 目 : 
$ ng new angular2 hello world 
运行 之 后 ， 你 将 看 到 下 列 输出 : 
installing ng 2 


create .editorconfig 
create README .md 























图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


12 起步 5 





create src/app/app.component.css 
create src/app/app.component.html 
create src/app/app.component.spec.ts 
create src/app/app.component.ts 
create src/app/app.module.ts 
create src/app/index.ts 
create src/app/shared/index.ts 
create src/assets/.gitkeep 
create src/assets/.npmignore 
create src/environments/environment.dev.ts 
create src/environments/environment.prod.ts 
create src/environments/environment.ts 
create src/favicon.ico 
create src/index.html 
create src/main.ts 
create src/polyfills.ts 
create src/styles.css 
create src/test.ts 
create src/tsconfig.json 
create src/typings.d.ts 
create angular-cli.json 
create e2e/app.e2e-spec.ts 
create e2e/app.po.ts 
create e2e/tsconfig.json 
create .gitignore 
create karma.conf.js 
create package. json 
create protractor.conf.js 
create tslint.json 

Successfully initialized git. 

0 Installing packages for tooling via npm 


它 将 运行 一 段 时 间 ， 进 行 npm 依 赖 的 安装 。 一 旦 安装 结束 ， 我 们 会 看 到 一 条 成 功 信息 : 

Installed packages for tooling via npm. 

这 里 生成 了 很 多 文件 ! 现在 不 用 关心 它们 都 是 什么 。 我 们 会 在 本 书 中 讲解 每 一 个 文件 的 含义 
和 用 途 。 不 过 现在 ， 我 们 先 把 注意 力 集中 在 如 何 用 Angular 代 码 开始 工作 上 。 

进入 ng 命令 创建 的 angular2 hello world 目 录 ， 来 看 看 它 里 面 都 有 什么 : 


$ cd angular2 hello. world 
$ tree -F -L 1 


























|— README . md // an useful README 

|l— angular-cli. json // angular-cli configuration file 
|— e2e/ // end to end tests 

| 一 karma.conf.js // unit test configuration 

一 node modules/ // installed dependencies 

|— package. json // npm configuration 

|l— protractor.conf.js // e2e test configuration 

一 src/ // application source 

L— tslint.json // linter config file 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


第 1 章 编写 你 的 第 一 个 Angular Web 应 用 





3 directories, 6 files 


我 们 目前 关注 的 目录 是 src， 应 用 代码 就 在 里 面 。 下 面 看 看 我 们 在 那里 创建 了 什么 : 


$ cd src 
$ tree -F 











| |-- app.component.css 
| |-- app.component.html 
| |-- app.component.spec.ts 
| |-- app.component.ts 

| |-- app.module.ts 

| |-- index.ts 

| ^—— shared/ 

| ^-- index.ts 

|-- assets/ 

|-- environments/ 

| |-- environment.dev.ts 
| |-- environment.prod.ts 
| ^-— environment.ts 

|-- favicon.ico 

|-- index.html 

|-- main.ts 

|-- polyfills.ts 

|-- styles.css 

|-- test.ts 

|-- tsconfig. json 

-— typings.d.ts 


4 directories, 18 files 
用 你 惯用 的 文本 编辑 器 打开 index.html， 应 该 会 看 到 如 下 代码 。 


code/first app/angular2 hello world/src/index.html 


<!doctype html» 

«html» 

«head» 
«meta charset-"utf-8"» 
«title»Angular2HelloWorld«/title» 
«base hrefz"/"; 


«meta name-"viewport" content-"widthzdevice-width, initial-scale-1"» 
«link rel="icon" type-"image/x-icon" href-"favicon.ico"» 

«/head» 

«body» 
«app-root»Loading...«/app-root» 

«/body» 

«/html» 


我 们 把 它 分 解 一 下 。 
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code/first app/angular2 hello world/src/index.html 
<!doctype html» 
«html» 
«head» 
«meta charset-"utf-8"» 
«title»Angular2HelloWorld«/title» 
«base hrefz"/"; 


如 果 你 熟悉 HTML , 这 第 一 部 分 就 很 平淡 无 奇 了 ,我 们 在 这 里 声明 了 页 面 的 字符 集 ( charset )、 
标题 (title ) 和 基础 URL ( base href )。 








code/first app/angular2 hello world/src/index.html 


«meta name-z"viewport" content-"widthzdevice-width, initial-scale-1"» 


如 果 你 继续 深入 模板 主体 (body )， 就 会 看 到 下 列 代码 。 





code/first app/angular2 hello world/src/index.html 
«app-root»Loading...«/app-root» 

«/body» 

«/html» 

我 们 的 应 用 将 会 在 app-root 标 签 处 进行 泻 染 , 稍 后 剖析 源 代码 的 其 他 部 分 时 还 会 看 到 它 。 文 

本 Loading... 是 一 个 占 位 符 , 在 应 用 代码 加 载 之 前 会 显示 它 。 我 们 可 以 借助 此 技巧 来 通知 用 户 该 应 

用 正在 加 载 ， 可 以 像 这 里 一 样 显示 一 条 消息 ， 也 可 以 显示 一 个 加 载 动画 或 其 他 形式 的 进度 通知 。 


之 后 就 可 以 编写 应 用 代码 了 。 



































1.3 ”运行 应 用 


在 开始 修改 之 前 ,我们 先 把 这 个 自动 生成 的 初始 应 用 加 载 到 浏览 咒 中 。angular-cli 有 一 个 
内 建 的 HTTP 服 务 器 ， 我 们 可 以 用 它 来 启动 应 用 。 回 到 终端 ， 进 入 应 用 的 根 目 录 (在 本 应 用 中 


是 ./angular2 hello world 目 录 ) 并 运行 命令 。 




















$ ng serve 


xx NG Live Development Server is running on http://localhost:4200. xx 
// a bunch of debug messages 


Build successful - 1342ms. 




















我 们 的 应 用 正在 localhost 的 4200 端 口上 运行 。 打 开 浏 览 器 并 访问 http://localhost:4200， 结果 如 
图 1-3 所 示 。 





o 注意 ， 如 果 4200 端 口 由 于 某 种 原因 被 占用 了 ， 也 可 以 在 其 他 端口 号 上 启动 。 仔 
细 阅 读 你 电脑 上 的 输出 信息 ， 找 出 开发 服务 器 的 实际 URL。 
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E Anoular2Readit x Felpe 


€ C D localhost:4200 


app works! 


K-3 ”运行 中 的 应 用 
好 ， 现 在 我 们 设置 好 了 应 用 ， 而 且 知道 了 该 如 何 运行 它 ， 可 以 开始 写 代 码 了 。 














1.3.1 制作 Component 
Angular 背 后 的 指导 思想 之 一 就 是 组 件 化 。 


在 Angular 应 用 中 , 我 们 写 HTML 标 记 并 把 它 变 成 可 交互 的 应 用 。 不 过 浏览 需 只 认识 一 部 分 标 
签 ， 比 如 cselect、> 、<form> 和 <video> 等 ,它们 的 功能 都 是 由 浏览 胡 的 开发 者 预先 定义 好 的 。 


如 果 我 们 想 教 浏览 需 认 识 一 些 新 标签 ， 该 怎么 办 呢 ? 比如 我 们 想 要 一 个 cweather> 标 签 ， 用 
来 显示 天 气 ; 又 比如 想 要 一 个 loginy> 标 签 ， 用 来 创建 一 个 登录 面板 。 


这 就 是 组 件 化 背后 的 基本 思想 : 我 们 要 教 浏览 器 认识 一 些 拥有 自 定 义 功 能 的 新 标签 。 






























































o 如 果 你 用 过 AngularJS， 那 么 可 以 把 组 件 当 作 新 版 本 的 指令 。 





让 我 们 来 创建 第 一 个 组 件 。 写 完 该 组 件 之 后 ， 就 能 在 HTML 文 档 中 使 用 它 了 ， 就 像 这 样 : 
«app-hello-world»«/app-hello-world» 

要 使 用 angular-cli 来 创建 新 组 件 ， 可 以 使 用 generate (ÆR) 命令 。 

要 生成 hello-wor1d 组 件 ， 我 们 需要 运行 下 列 命令 : 


$ ng generate component hello-world 

installing component 
create src/app/hello-world/hello-world.component.css 
create src/app/hello-world/hello-world.component.html 
create src/app/hello-world/hello-world.component.spec.ts 
create src/app/hello-world/hello-world.component.ts 
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那 该 怎么 定义 一 个 新 组 件 呢 ? 最 基本 的 组 件 包 括 两 部 分 : 

(1) Component 注解 

(2) 组 件 定义 类 

下 面 来 看 看 组 件 的 代码 ， 然 后 逐一 讲解 。 打 开 第 一 个 TypeScript 文 件 : src/app/hello-world/ 


hello-world.component.ts - 


code/first app/angular2 hello world/src/app/hello-world/hello-world.component.ts 


import ( Component, OnInit } from 'Gangular/core'; 


GComponent ( f 
selector: 'app-hello-world', 
templateUrl: './hello-world.component.html', 
styleUrls: ['./hello-world.component.css'] 


D) 


export class HelloWorldComponent implements OnInit { 
constructor() { } 


ngOnInit() ( 


.ts 而 不 是 ,js。 问 题 在 于 浏览 器 并 不 知道 该 如 何 解 


e» 注意 ，TypeScript 文 件 的 后 组 是 
这 个 问题 ，ng serve 命 令 会 自动 把 .ts 文件 编译 为 js 


释 TypeScript 文 件 。 为 了 解决 
文件 。 





这 个 代码 片段 乍 一 看 可 能 有 点 怒 怖 ， 但 别 担心 ， 我 们 接 下 来 就 会 一 步 步 讲 解 它 。 


1.3.2 ”导入 依赖 


import 语 句 定义 了 我 们 写 代码 时 要 用 到 的 那些 模块 。 这 里 我 们 导入 了 两 样 东 西 : Component 
和 OnInit。 


我 们 从 "@angular/core" 模 块 中 导入 了 组 件 (import Component )。"@angular/core" 部 分 
告诉 程序 到 哪里 查找 所 需 的 这 些 依赖 。 这 个 例子 中 ， 我们 告诉 编译 髓 :"@angular/core" 定 义 并 
导出 了 两 个 JavaScript/TypeScript 对 象 ， 名 字 分 别 是 Component 和 OnInit。 

同样 ， 我 们 还 从 这 个 模块 中 导入 了 OnInit (import OnInit )。 稍 后 你 就 会 知道 ，OnInit 能 
帮 我 们 在 组 件 的 初始 化 阶段 运行 某 些 代码 。 不 过 现在 先 不 用 管 它 。 


注意 这 个 import 语 句 的 结构 是 import ( things ) from wherever 格 式 。 我 们 把 { things } 
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这 部 分 的 写法 叫 作 解构 。 解 构 是 由 ES6 和 TypeScript 提 供 的 一 项 特性 ， 下 一 章 会 深入 讲解 。 


import 的 用 法 很 像 Jjava 中 的 import 或 Ruby 中 的 require: 从 另 一 个 模块 中 拉 取 这 些 依赖 ， 并 
且 让 这 些 依赖 在 当前 文件 中 可 用 。 


1.3.8 Component 注解 
导入 依赖 后 ， 我 们 还 要 声明 该 组 件 。 


code/first app/angular2 hello world/src/app/hello-world/hello-world.component.ts 


GComponent( { 
selector: 'app-hello-world', 
templateUrl: './hello-world.component.html', 
styleUrls: ['./hello-world.component.css'] 


}) 
如 果 你 习惯 用 JavaScript 编 程 ， 那 么 下 面 这 段 代码 可 能 看 起 来 有 点 怪异 : 


@Component( { 
/Ó s 
}) 


这 是 什么 ?” 如 果 你 有 Java 开 发 背景 ， 应 该 会 很 熟悉 : 它们 是 注解 。 























AngularJS 的 依赖 注入 技术 在 幕后 使 用 了 注解 的 概念 。 也 许 你 还 不 熟悉 它们 ， 但 
注解 其 实 是 让 编译 器 为 代码 添加 功能 的 途径 之 一 。 





我 们 可 以 把 注解 看 作 添 加 到 代码 上 的 元 数据 。 当 在 HelloWor1d 类 上 使 用 @Component 时 ， 就 
把 Hel lowor1d“ 装 饰 ”( decorate ) 成 了 一 个 Component。 


这 个 “app-hello-wor1ldy 标 签 表 示 我 们 希望 在 HTML 中 使 用 该 组 件 。 要 实现 它 ， 就 得 配置 
@Ccomponent 并 把 selector 指 定 为 app-hello-wor1ld。 


GComponent( { 
selector: 'app-hello-world' 
// ... more here 


}) 

有 很 多 种 方式 来 配置 选择 器 (selector), 类 似 于 CSS 选 择 器 、XPath 或 JQuery 选 择 器 。Angular 
组 件 对 选择 器 的 混用 方式 添加 了 一 些 特有 的 限制 , 稍 后 会 谈 到 。 现在， 只 要 记 住 我 们 正在 定义 一 
个 新 的 HTML 标 签 就 可 以 了 。 

这 里 的 selector 属 性 用 来 指出 该 组 件 将 使 用 哪个 DOM 元 素 。 如 果 模 板 中 有 “app-hello- 
wor1d> </app-hello-wor1d> 标 签 ， 就 用 该 Component 类 及 其 组 件 定 义 信息 对 其 进行 编译 。 
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1.3.4 H templateUrl 添加 模板 


在 这 个 组 件 中 ， 我 们 把 templateUr1 指 定 为 ./hello-wor1d.component.html。 这 意味 着 我 
们 将 从 与 该 组 件 同 目录 的 hello-world.component.html 文 件 中 加 载 模 板 。 下 面 来 看 看 这 个 文件 。 





code/first app/angular2 hello world/src/app/hello-world/hello-world.component.html 


<p> 
hello-world works! 
</p> 


这 里 定义 了 一 个 p 标 签 ， 其 中 包含 了 一 些 简单 的 文本 。 当 Angular 加 载 该 组 件 时 ， 就 会 读 取 此 
文件 的 内 容 作 为 组 件 的 模板 。 





1.3.5 添加 template 
我 们 有 两 种 定义 模板 的 方式 : 使 用 ecomponent 对 象 中 的 template 属 性 ; 指定 templateUr1l 


性 。 
我 们 可 以 通过 传人 template 选 项 来 为 ecomponent 添 加 一 个 模板 : 


GComponent ( f 
selector: 'app-hello-world', 
template: ^ 
«p» 
hello-world works inline! 
</p> 





Kus 
à 








}) 

注意 ， 我 们 在 反 引 号 中 (`...* ) 定义 了 template 字 符 串 。 这 是 ES6 中 的 一 个 新 特性 〈 而 且 很 
棒 )， 人 允许 使 用 多 行 字 符 串 。 使 用 反 引 号 定义 多 行 字 符 串 ， 可 以 让 我 们 更 轻松 地 把 模板 放 到 代码 
文件 中 。 





























你 真 的 应 该 把 模板 放 进 代码 文件 中 吗 ? 答案 是 : 视 情况 而 定 。 在 很 长 一 段 时 间 
E, 大 家 都 觉得 最 好 把 代码 和 模板 分 开 。 这 对 于 一 些 开发 团队 来 说 确实 更 容易 ， 
不 过 在 某 些 项 目 中 会 增加 成 本 ， 因 为 你 将 不 得 不 在 一 大 堆 文件 之 间 切 换 。 
个 人 观点 : 如 果 模 板 行 数 短 于 一 页 ， 我 更 倾向 于 把 模板 和 代码 放 在 一 起 ( 也 就 
是 .ts 文件 中 )。 这 样 就 能 同时 看 到 逻辑 和 视图 部 分 ， 同 时 也 便于 理解 它们 之 间 如 
何 互 动 。 

把 视图 和 代码 内 联 在 一 起 的 最 大 缺点 是 ， 很 多 编辑 器 仍然 不 支持 对 内 部 HTML 
字符 串 进行 语法 高 亮 。 我 们 期 待 能 尽快 看 到 有 更 多 编辑 器 支持 对 模板 字符 串 内 
说 HTML 的 语法 高 亮 。 
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1.3.6 用 styleUrls 添加 CSS 样式 


注意 styleurls 属 性 : 





styleUrls: ['./hello-world.component.css'] 


这 段 代码 的 意思 是 ， 我 们 要 使 用 hello-world.component.css 文 件 中 的 CSS 作 为 该 组 件 的 样式 。 
Angular 使 用 一 项 叫 作 样式 封装 ( style-encapsulation ) 的 技术 , 它 意 味 着 在 特定 组 件 中 指定 的 样 
只 会 应 用 于 该 组 件 本 身 。14.1 节 会 深入 讨论 它 。 


目前 还 用 不 到 任何 “组 件 局 部 样式 ”， 你 只 要 先知 道 它 就 行 了 或 整体 删除 此 属性 )。 














E 

















ms 


你 可 能 注意 到 了 该 属性 与 template 有 个 不 同 点 : 它 接 收 一 个 数组 型 参数 。 这 
因为 我 们 可 以 为 同一 个 组 件 加 载 多 个 样式 表 。 


1.3.7 ”加 载 组 件 

现在 ,我 们 已 经 写 完 了 第 一 个 组 件 的 代码 ， 那 该 如 何 把 它 加 载 到 页 面 中 呢 ? 

如 果 再 次 在 浏览 器 中 访问 此 应 用 ， 我 们 会 看 到 一 切 照 日。 这 是 因为 我 们 仅仅 创建 了 该 组 件 ， 
但 还 没有 使 用 它 。 

为 了 解决 这 一 点 ， 需 要 把 该 组 件 的 标签 添加 到 一 个 将 要 泻 染 的 模板 中 去 。 打 开 文 件 first_app/ 
angular2 hello world/src/app/app.component.html , 


记 住 ， 因为 我 们 为 HelloWor1dComponent 配 置 了 app- hello-worldi 选择 器 ， 所 以 要 在 模板 中 
4 Hj «app-hello-world»«/app-hello-world» 。 让 我 们 把 capp-hello-worldy 标签 添加 到 app. 


component.html'f 。 


















































code/first app/angular2 hello world/src/app/app.component.html 
«h1» 
(ftitle]] 


«app-hello-world»«/app-hello-world» 
«/h1» 


现在 ,刷新 该 页 面 就 会 看 到 如 图 1-4 所 示 结 
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9 9 O anguiarzHeiioworid x ng-book 





e Œ | D localhost:4200 Ki 三 





app works! 


hello-world works! 





图 1-4 “Hello world” 一 切 正 常 





工作 正常 ! 


1.4 把 数据 添加 到 组 件 中 


现在 ， 该 组 件 泻 染 了 一 个 静态 模板 。 这 表示 我 们 的 组 件 还 不 够 有 趣 。 

设想 有 一 个 应 用 会 显示 一 个 用 户 列表 , 并 且 我 们 想 在 其 中 显示 用 户 的 名 字 。 在 泻 染 整 个 列表 
之 前 ， 需 要 先 泻 染 一 个 单独 的 用 户 。 因 此 ， 我 们 来 创建 一 个 新 的 组 件 ， 它 将 显示 用 户 的 名 字 。 

再 次 使 用 ng generate 命 令 : 

ng generate component user-item 


记 住 ， 想 看 到 我 们 创建 好 的 组 件 ， 就 要 把 它 添加 到 一 个 模板 中 。 


让 我 们 把 app-user-item 标 签 添 加 到 app.component.html 中 ， 以 便 看 到 所 作 的 改动 。 把 
app.component.html 修 改 成 下 面 这 样 。 





code/first app/angular2 hello world/src/app/app.component.html 


«h1» 
{{title}} 


«app-hello-world»«/app-hello-world» 


«app-user-item»«/app-user-item» 
«/h1» 


然后 刷新 页 面 ， 并 确认 你 在 该 页 看 到 文本 user-item works! o 
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RITE User ItemComponent 显示 一 个 指定 用 户 的 名 字 。 

因此 , 引入 name 并 声明 为 组 件 的 一 个 新 属性 。 有 了 name 属 性 , 我 们 就 能 在 不 同 的 用 户 之 间 复 
用 该 组 件 了 《但 要 求 页 面 脚本 、 逻 辑 和 样式 相同 )。 

为 了 添加 名 字 ， 我 们 要 在 UserItemComponent 类 上 引入 一 个 属性 , 来 声明 该 组 件 有 一 个 名 叫 


name 的 局 部 变量 。 





























code/first app/angular2 hello world/src/app/user-item/user-item.component.ts 


export class UserItemComponent implements OnInit { 
name: string; // «-- added name property 


constructor() { 
this.name - 'Felipe'; // set the name 


} 


ngOnInit() { 


} 
注意 ， 我 们 改变 了 以 下 两 点 。 
1.name 属 性 


我 们 往 UserItemComponent 类 添加 了 一 个 属性 。 注意， 这 相对 于 ES5 JavaScript 来 说 是 个 新 语 
法 。 在 name:string; 中 ，name 是 我 们 想 设 置 的 属性 名 ， 而 string 是 该 属性 的 类 型 。 


为 name 指 定 类 型 是 TypeScript 中 的 特性 ， 用 来 确保 它 的 值 必须 是 string。 这 些 代码 在 User- 
ItemComponent 类 的 实例 中 设置 了 一 个 名 为 name 的 属性 ， 并 且 编 译 右 会 确保 name 是 一 个 string。 


2. 构造 函数 

在 UserItemComponent 类 中 , 我 们 定义 了 一 个 构造 函数 。 这 个 函数 会 在 创建 这 个 类 的 实例 时 
自动 调用 。 

在 我 们 的 构造 函数 中 ， 可 以 通过 this.name 来 设置 ame 属性 。 

如 果 这 样 写 : 

































































code/first app/angular2 hello world/src/app/user-item/user-item.component.ts 


constructor() { 
this.name - 'Felipe'; // set the name 


j 
就 表示 当 一 个 新 的 UserItemComponent 组 件 被 创建 时 ， 把 name 设 置 为 'Felipe' o 
e 泻 染 模板 
填 好 这 个 值 之 后 ， 我 们 可 以 用 模板 语法 〈 也 就 是 双 花 括号 语法 {{ }} ) 在 模板 中 显示 该 变量 























T 
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的 值 。 


code/first app/angular2 hello world/src/app/user-item/user-item.component.html 





«p» 
Hello {{ name }} 
</p> 


注意 , 我 们 在 template 中 引入 了 一 个 新 的 语法 : {{ name }}。 这 些 括号 叫 作 “模板 标签 ”( 也 
叫 “ 小 胡子 标签 ”)。 模板 标签 中 间 的 任何 东西 都 会 被 当 作 一 个 表达 式 来 展开 。 这 里 , 因为 template 
是 绑 定 到 组 件 上 的 ， 所 以 name 将 会 被 展开 为 this .name 的 值 ， 也 就 是 'Felipe '。 

3. 试 试看 

进行 这 些 修 改 之 后 ， 重 新 加 载 页 面 ， 页 面 上 应 该 显示 Hello Felipe， 如 图 1-5 所 示 。 
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| app works! 
| hello-world works! 


| Hello Felipe 





图 1-5” 带 有 数据 的 应 用 





1.5 ”使 用 数组 


现在 ， 我 们 可 以 对 一 个 单独 的 名 字 问 好 了 ， 但 是 如 果 想 对 一 组 名 字 问 好 呢 ? 

如 果 你 以 前 用 过 AngularJS ， 那 么 可 能 用 过 ng-repeat 指 令 。 在 Angular 中 ，NgFor 是 类 似 的 指 
S (我 们 在 模板 标记 中 通过 xngFor 语 法 来 使 用 它 ， 稍 后 会 讲 到 )。 它 们 在 语法 上 略 有 不 同 ， 但 作 
用 是 一 样 的 : 为 一 组 对 象 反 复 泻 染 同样 的 页 面 脚本 。 

下 面 创建 一 个 会 泻 染 用 户 列表 的 新 组 件 。 我 们 还 是 从 生成 一 个 新 组 件 开始 : 


ng generate component user-list 
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第 1 章 编写 你 的 第 一 个 Angular Web 应 用 
接着 ， 把 app.component.html 文 从 





«h1» 


code/first app/angular2 hello world/src/app/app.component.html 
(ftitle]] 





FPH «app-user-item» 替换 为 capp-user-1 ist». 


«app-hello-world»«/app-hello-world» 
«app-user-list»«/app-user-list» 
«/h1» 















































就 像 给 UserItemComponent 添 加 了 name 属 
不 过 , 不 再 设置 该 属性 只 
型 后 面 紧 跟 一 对 方 括号 [] 


性 一 样 ， 我 们 也 给 UserListComponent 添 加 names 
只 存储 一 个 字符 串 ， 而 是 存储 一 个 字符 
， 如 下 所 示 。 


串 数 组 。 数 组 的 语法 就 是 在 类 
code/first app/angular2 hello world/src/app/user-list/user-list.component.ts 
export class UserlistComponent implements OnInit { 
names: string[]; 
constructor() { 


this.names = ['Ari', 
j 


'Carlos', 'Felipe', 
ngOnInit() ( 
j 


'Nate']; 


} 


要 留意 的 第 





处 变化 是 在 UserListComponent 类 中 添加 了 一 个 新 的 string[] 属 性 ,这 种 语法 
表示 names 的 类 型 是 string 构 成 的 数组 。 它 的 男 一 种 写法 是 Array<string>。 
我 们 还 修改 了 构造 孙 数 ， 让 它 将 this.names 的 值 设置 为 ['Ari',，'Carlos',，'Felipe'，, 
'Nate']。 


«ul» 


现在 就 可 以 更 新 模板 , 泻 染 出 这 个 名 字 列 表 了 。 这 时 我 们 要 有 
进行 迭代 ， 为 列表 中 的 每 一 个 条 目 生 成 一 个 新 标 


p x 





Ao A 





崩 到 *ngFor ， 它 会 在 一 个 列表 上 
所 模板 如 下 所 示 。 
code/first app/angular2 hello world/src/app/user-list/user-list.component.html 
«/ul» 


«li «ngFor-"let name of names"»Hello {{ name }}</li> 


字符 和 1et 语 法 可 


我 们 用 一 个 ul 和 一 个 添加 了 xngFor="let name of names" 属 性 的 1i 元 素来 更 新 模板 。 这 个 x 
能 会 让 你 摸 不 着 头脑 ， 我 们 把 它们 拆 开 来 解 条 

*ngFor 语 法 是 说 我 们 想 在 这 个 属性 上 使 用 NgFor 指 令 。 你 可 以 
的 循环 ， 其 











Fo 


DC 
H Be Hn PAA HA 








I 











UL 





NgFor 理 解 成 一 个 类 似 于 for 
f 建 一 个 DOM 元 素 。 
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它 的 值 是 "let name of names" 。names 是 我 们 在 Hel lowor1d 对 象 中 定义 的 名 字数 组 。1let mM 
name 叫 作 引 用 。"1let name of names" 的 意思 是 ， 循 环 处 理 names 中 的 每 一 个 元 素 并 将 其 逐个 赋 
值 给 一 个 名 叫 name 的 局 部 变量 。 


NgFor 指 令 将 为 数组 names 中 的 每 一 个 条 目 都 浑 染 出 一 个 1i 标 签 ， 并 声明 一 个 本 地 变量 name 
来 持 有 当前 迭代 的 条 目 。 然 后 ， 这 个 新 变量 将 被 插值 到 He1l1o (( name }} 代 码 片 段 里 。 








^ 并 不 是 必须 把 这 个 引用 变量 命名 为 name。 我 们 也 可 以 这 样 写 : 
«li «ngForz"let foobar of names">Hello {{ foobar )]«/li» 
但 把 顺序 反 过 来 行 吗 ? 来 个 小 测验 吧 ! 如 果 写 成 下 面 这 样 会 如 何 ? 
«li «ngForz"let name of foobar">Hello {{ name }}</li> 


当然 会 出 错 ! 因为 foobar 并 不 是 该 组 件 上 的 属性 。 


人 
不 是 ul 标签 上 ， 因 为 我 们 希望 重复 的 是 列表 元 素 (1i) 而 非 列 表 本 身 (u1)。 


e» 如 果 你 想 进一步 探索 ,可 以 直接 阅读 Angular 源 代码 来 学 习 Angular 核 心 团队 是 如 
何 编写 组 件 的 。 比 如 ， 你 能 在 https://github.com/angular/angular/blob/master/ 
modules/%40angular/common/src/directives/ng for.ts 找 到 NgFor 指 令 的 源 代码 。 


现在 刷新 页 面 ， 就 会 看 到 此 数组 中 的 每 个 字符 串 都 有 了 对 应 的 1i ， 如 图 1-6 所 示 。 


四 
© 
i 
i 
m H 


€ Œ | (5 localhost:4200 





app works! 
hello-world works! 


* Hello Ari 

* Hello Carlos 
* Hello Felipe 
* Hello Nate 





图 1-6 ” 带 有 数据 的 应 用 
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1.6 ”使 用 


UserItemComponent 组 件 


还 记得 以 前 我 们 创建 过 UserItemComponent 吗 ?这 次 不 会 在 UserListComponent 中 直接 演 梁 















































每 个 名 字 了 了， 而 是 改 用 UserItemComponent 作 为 子 组 件 。 也 就 是 说 ,我 们 不 再 直接 重复 演 染 1i 标 

















签 ， 而 是 让 Use 


rItemComponent 来 为 列表 中 的 每 个 条 目 指 定 模板 ( 和 功能 )。 








我 们 需要 做 三 件 事 来 实现 这 一 点 。 

(1) 配置 UserListComponent 来 (在 它 的 模板 中 ) 演 染 UserItemComponent 。 
(2) 配置 UserItemComponent 来 接收 name 变 量 作为 输入 。 

(3) 配置 UserListComponent 的 模板 来 把 用 户 名 传 给 UserItemComponent 。 
让 我 们 来 逐一 完成 。 








1.6.1 泻 染 


UserltemC 





UserltemComponent 


omponent 指 定 了 选择 需 app-user-item， 接 下 来 要 把 这 个 标签 添加 到 模板 中 。 我 


们 要 做 的 就 是 把 1i 标 签 替 换 为 app-user-item 标 签 。 


code/first - 


«ul» 


app/angular2 hello world/src/app/user-list/user-list.component.html 


«app-user-item 
«ngFor-"let name of names"» 
«/app-user-item» 


«/ul» 




















注意 ， 当 于 


书 1i 标 签 替 换 为 app-user-item 时 ， 我 们 保留 了 ngFor 属 性 。 这 是 因为 我 们 仍然 要 








在 用 户 名 列表 J 
注意 ， 我 介 


上 进行 循环 。 


] 还 移 除了 该 模板 内 部 的 内 容 ， 因 为 UserItemComponent 组 件 有 自己 的 模板 。 如 果 























刷新 浏览 器 ， 看 到 的 结果 如 图 1-7 所 示 。 


它 确实 重复 了 ,但 有 些 不 大 对 劲 


2 AT. 
谢 天 谢 地 ， 




















每 个 用 户 名 都 是 Felipe! 我 们 需要 某 种 方式 来 把 数据 传 








Angular 为 此 提供 了 一 种 方式 : @Input 注 解 。 
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€ > Q 0 localhost:4200 








app works! 

hello-world works! 
Hello Felipe 
Hello Felipe 
Hello Felipe 


Hello Felipe 








图 1-7 带 有 数据 的 应 用 


1.6.2 ”接收 输入 


还 记得 吗 ?UserItemComponent 已 经 在 其 构造 函数 中 设置 了 this.name = 'Felipe';。 现 在 ， 
我 们 需要 进行 一 些 改动 ， 让 组 件 的 name 属 性 从 外 部 接收 值 。 


这 里 要 把 userItemComponent 修 改 为 : 

















code/first app/angular2 hello world/src/app/user-item/user-item.component.ts 
import { 

Component, 

OnInit, 

Input // «--- added this 
) from 'Gangular/core'; 


GComponent ( f 
selector: 'app-user-item', 
templateUrl: './user-item.component.html', 
styleUrls: ['./user-item.component.css'] 


}) 
export class UserItemComponent implements OnInit { 
GInput() name: string; // «-- added Input annotation 


constructor() ( 
// removed setting name 


} 


ngOnInit() { 
} 
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注意 ,我 们 修改 了 name 属 性 , 使 其 具有 一 个 eInput 注 解 。 在 第 3 章 中 ,我 们 会 讨论 更 多 关于 Input 
( 和 output ) 的 知识 ， 但 目前 你 只 要 知道 该 语法 能 让 我 们 从 父 模板 中 传 进来 一 个 值 就 可 以 了 。 


为 了 使 用 Input ， 我 们 还 得 把 它 添加 到 import 的 列表 中 去 。 
最 后 ， 我 们 不 希望 为 name 设 置 默认 值 ， 因 此 从 构造 函数 中 移 除 它 。 
现在 我 们 有 了 一 个 名 叫 name 的 Input ， 那 么 该 如 何 使 用 它 呢 ? 


— 














1.6(3 传 入 Input 值 
为 了 把 一 个 值 传人 人 组件， 就 要 在 模板 中 使 用 方 括号 [] 语 法 。 来 看 看 修改 过 的 模板 。 











code/first app/angular2 hello world/src/app/user-list/user-list.component.html 


«ul» 
«app-user-item 
*xngFor-"let name of names" 
[name]2"name"» 
«/app-user-item» 
«/ul» 


注意 , 我 们 在 app-user-item 标 签 上 添加 了 新 属性 [name]="name" 。 在 Angular 中 ， 添 加 一 个 
带 方 括号 的 属性 ( 比如 [foo] ) 意味 着 把 一 个 值 传 给 该 组 件 上 同名 的 输入 属性 〈 比如 foo )。 
在 这 个 例子 中 ， name 碳 侧 的 值 来 自 ngFor 中 的 let name . . .语句 。 也 就 是 说 ， 对 于 下 列 代 码 : 
«app-user-item 
*ngFor-"let individualUserName of names" 


[name]z"individualUserName"» 
«/app-user-item» 


[name] 部 分 指定 的 是 userItemCcomponent 上 的 Input。 注 意 , 我 们 正在 传人 的 并 不 是 字符 串 字 
面 量 "individualUserName" ， 而 是 individualUserName 变 量 的 值 ， 也 就 是 names 中 的 每 个 元 素 。 


在 第 3 章 中 ， 我 们 会 详细 讲解 输入 属性 和 输出 属性 。 现 在 ， 你 所 要 知道 的 是 : 
(1) 在 names 中 迭代 ; 

(2) 为 names 中 的 每 个 元 素 创 建 一 个 新 的 userItemComponent ; 

(3) 把 当前 名 字 的 值 传 给 userItemComponent 上 名 叫 name 的 Input 属 性 。 
现在 ， 泻 染 名 字 列 表 的 工作 就 完成 了 ( 如 图 1-8 所 示 )! 

ARE! 你 已 经 用 组 件 构建 出 了 你 的 第 一 个 Angular 应 用 。 


当然 ， 该 应 用 非常 简单 ， 你 应 该 还 希望 构建 更 复杂 的 应 用 。 别 急 ， 在 本 书 中 , 我 们 将 带 你 成 
为 编写 Angular 应 用 的 专家 。 EKE, 我 们 在 本 章 中 还 会 构建 一 个 投票 应 用 ( 就 像 Reddit 或 Product 
Hunt )。 该 应 用 具有 用 户 交 互 特性 以 及 更 多 的 组 件 。 
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app works! 
hello-world works! 
Hello Ari 
Hello Carlos 
Hello Felipe 


Hello Nate 








图 1-8 ”应 用 中 的 名 字 一 切 正 常 
在 开始 构建 新 的 应 用 之 前 ， 先 来 仔细 看 看 Angular 应 用 是 如 何 启 动 的 。 


17 "Ru EEBAXE 


应 用 都 有 一 个 主人 口 点 。 该 应 用 是 由 angular-cli 构 建 的 ， 而 angular-cli 则 是 基于 一 
个 名 bei 工具 。 你 不 必 理 解 webpack 就 能 使 用 Angular， 但 理解 应 用 的 启动 流程 是 很 有 帮 
助 的 。 


我 们 可 以 通过 运行 下 列 命令 来 启动 应 用 : 


ng serve 


ng 会 查阅 angular-clijson 文 件 来 找 出 该 应 用 的 人口 点 。 我 们 来 跟踪 一 下 ng 是 如 何 找到 我 们 刚 
刚 构 建 的 组 件 的 。 
大 体 来 说 ， 过 程 如 下 所 示 : 
口 angular-cli.json 指 定 一 个 "main" 文 件 ， 这 里 是 main.ts; 
O main.ts 是 应 用 的 人口 点 ， 并 且 会 引导 (bootstrap) 我 们 的 应 
口 引导 过 程 会 引导 一 个 Angular 模 块 一 一 我 们 尚未 讨论 过 模块 ， Com Bob eV E; 
a 我 们 使 用 AppModule 来 引导 该 应 用 ， 它 是 在 src/app/app.module.ts 中 指定 的 ; 
口 AppModule 指 定 了 将 哪个 组 件 用 作 顶 层 组 件 ， 这 里 是 AppComponent; 
口 AppComponent 的 模板 中 有 一 个 capp-user-list> 标 签 ， 它 会 泻 染 出 我 们 的 用 户 列 表 。 
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我 们 将 在 稍 后 深入 讨论 这 个 过 程 ， 现 在 把 目光 聚焦 在 Angular 的 模块 系统 上 : NgModule。 


Angular 有 一 个 强大 的 概念 : 模块 。 当 引导 一 个 Angular 应 用 时 ， 并 不 是 直接 引导 一 个 组 件 ， 
而 是 创建 了 一 个 NgModule ， 它 指向 了 你 要 加 载 的 组 件 。 


我 们 来 看 看 代码 。 


code/first app/angular2 hello world/src/app/app.module.ts 


























GNgModule(Í 
declarations: [ 
AppComponent, 
HelloWorldComponent, 
UserltemComponent, 
UserListComponent 
l, 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule 
], 
providers: [], 
bootstrap: [AppComponent] 


}) 
export class AppModule { } 


我 们 首先 看 到 的 是 eNgModule 注 解 。 像 所 有 注解 一 样 ， 这 段 eNgModule( ..，) 代 码 为 紧 随 其 
后 的 AppModule 类 添加 了 元 数据 。 


@NgModule 注 解 有 三 个 属性 : declarations 、imports 和 bootstrap。 


declarations 指 定 了 在 该 模块 中 定义 的 组 件 。 你 可 能 已 经 注意 到 了 , 当 我 们 使 用 ng generate 
时 ， 它 会 自动 把 生成 的 组 件 添 加 到 这 个 列表 里 ! 这 涉及 Angular 中 的 一 个 重要 思想 : 


要 想 在 模板 中 使 用 一 个 组 件 ， 你 必须 首先 在 NgModule 中 声明 它 。 
imports 描述 了 该 模块 有 哪些 依赖 。 我 们 正在 创建 一 个 浏览 器 应 用 ， 因 此 要 导入 


BrowserModule。 


bootstrap 告 诉 Angular, 当 使 用 该 模块 引导 应 用 时 ,我 们 要 把 AppComponent 加 载 为 顶层 组 件 。 



































Qe 我 们 将 在 8.10 节 中 深入 讨论 NgModule。 


1.8 扩展 你 的 应 用 


现在 我 们 学 会 了 如 何 创建 一 个 基本 的 应 用 , 下 面 就 开始 仿造 一 个 Reddit 吧 。 在 开始 编程 之 前 ， 
你 最 好 先 对 此 应 用 进行 概览 并 把 它 拆 解 为 一 些 逻 辑 组 件 ， 如 图 1-9 所 示 。 
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€ œ> C [)localhost:8080 sz 

















wx» Angular 2 Simple Reddit 


Adda Link 
Title: 


iPad Game for Cats 


Link: 


| http;//ipadgameforcats.com| 


Angular 2 


(angular.io) 


^ upvote wẹ downvote 


Fullstack 


(fullstack.io) 


个 upvote YY downvote 


Angular Homepage 


(angular.io) 


个 upvote wẹ downvote 

















图 1-9 应 用 的 逻辑 组 件 

我 们 将 在 这 个 应 用 程序 中 构造 两 个 组 件 : 

(1) 整体 应 用 程序 ， 包 含 一 个 用 来 提交 新 文章 的 表单 〈 在 图 1-9 中 标示 为 深 灰 色 方 框 ); 
(2) 每 个 文章 〈 在 图 1-9 中 标示 为 浅 灰色 方 框 )。 




















在 较 大 的 应 用 程序 中 , 用 来 提交 文章 的 表单 本 身 也 应 该 设计 成 单独 的 组 件 , 但 是 
这 会 让 数据 传送 变 得 更 加 复杂 。 因 此 为 了 简化 ， 在 本 章 中 我 们 只 使 用 两 个 组 件 。 
我 们 目前 只 创建 两 个 组 件 ， 但 在 本 书后 面 的 章节 中 ， 我们 将 学 习 如 何 处 理 更 复 
杂 的 数据 架构 。 





首先 , 像 以 前 一 样 运行 ng new 命 令 ， 并 传人 一 个 想 要 的 名 字 来 生成 新 的 应 用 (这 里 我 们 将 创 
建 一 个 名 叫 angular2 reddit 的 应 用 ): 


ng new angular2 reddit 
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e 


我 们 在 可 下 载 的 示例 代码 中 提供 了 angular2_reddit 的 完整 版 。 


1.8.1 添加 CSS 








我 们 要 做 的 第 一 件 事 是 添加 一 些 CSS 样 式 ， 来 让 应 用 不 再 完全 “素颜 ”。 


@ 





如 果 你 正在 从 头 构建 应 用 ， 可 以 从 完成 版 示例 代码 的 first_app/angular2_reddit 目 
录 下 复制 一 些 文件 过 来 。 

复制 以 下 文件 到 你 的 应 用 目录 下 : 

e src/index.html 

e src/styles.css 

e src/app/vendor 

e src/assets/images 

在 本 项 目 中 , 我 们 将 使 用 Semantic-UT 来 帮助 添加 样式 。Semantic-UI 是 一 个 CSS 
框架 ， 类 似 于 Zurb Foundation? A Twitter Bootstrap”。 我 们 的 示例 代码 中 已 经 包 
含 了 它 ， 所 以 你 只 需要 复制 上 面 指定 的 文件 即 可 。 


1.8.2 ”应 用 程序 组 件 
现在 来 构建 一 个 新 的 组 件 ， 它 将 : 
(1) 存储 我 们 的 当前 文章 列表 ; 
(2) 包含 一 个 表单 ， 用 来 提交 新 的 文章 。 
我 们 可 以 在 sre/app/app.component.ts 文 件 中 找到 主 应 用 组 件 。 打 开 它 ， 可 以 看 到 与 以 前 一 样 


的 初始 内 容 。 








code/first app/angular2 reddit/src/app/app.component.ts 


import ( Component } from 'Gangular/core'; 


GComponent( f 


}) 





selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.ess'] 


export class AppComponent { 





(QD http://semantic-ui.com/ 
© http://foundation.zurb.com 
®© http://getbootstrap.com 
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title = 'app works!'; 
j 


我 们 对 此 模板 稍 作 修 改 ， 使 其 包含 一 个 表单 ， 用 于 添加 链接 。 我 们 将 从 semantic-ui 包 中 借 
用 一 点 样式 来 让 这 个 表单 看 起 来 更 漂亮 一 些 。 
code/first app/angular2 reddit/src/app/app.component.html 


«form classz"ui large form segment"» 
«h3 classz"ui header"»Add a Link«/h3» 








«div class-"field'» 
«label forz"title"»Title:«/label» 
«input name-z"title"» 

«/div» 

«div class-"field'» 
«label forz"link"»Link:«/label» 
«input name-z"link"» 

«/div» 

«/ form» 


我 们 要 创建 一 个 template， 它 定义 了 两 个 input 标 签 : 一 个 用 于 文章 的 标题 (title )， 另 一 
个 用 于 文章 的 链接 (link URL), 


刷新 浏览 器 后 ， 你 就 会 看 到 泻 染 出 了 如 图 1-10 所 示 的 表单 。 


O C fy anguiarzRedoit 








€ > Q' |D localhost:4200 * 


| w»2 Angular 2 Simple Reddit 





Adda Link 


Title: 


Link: 


图 1-10 表单 
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1.8.8 ”添加 互动 


现在 我 们 有 了 带 input 标 签 的 表单 ， 但 还 没有 任何 方式 来 提交 数据 。 下 面 在 表单 中 添加 一 个 
提交 按钮 ， 来 添加 一 些 交 互 。 

当 提交 该 表单 时 ， 我 们 和 希望 调用 一 个 函数 来 创建 并 添加 一 个 链接 。 可 以 往 cbutton /> 元 素 
上 添加 一 个 交互 事件 来 实现 这 个 功能 。 


把 事件 的 名 字 包 庄 在 圆 括号 ( ) 中 就 可 以 告诉 Angular: 我 们 要 响应 这 个 事件 。 比 如 ， 要 想 添 
加 一 个 函数 来 响应 cbutton /> 的 onClick 事 件 ， 可 以 像 这 样 把 它 传 进去 : 


«button (click)="addArticle()" 
class-"ui positive right floated button"> 
Submit link 
«/button» 


这 样 , 当 点 击 这 个 按钮 时 , 就 会 调用 一 个 名 叫 addArticle( ) 的 函数 ; 我 们 要 在 AppComponent 
类 中 定义 这 个 函数 。 代 码 如 下 所 示 。 


code/first app/angular2 reddit/src/app/app.component.ts 





























export class AppComponent { 
addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean { 
console.log(^Adding article title: $[title.value] and link: $[link.value]^); 
return false; 


} 
} 


一 旦 把 addArticle( ) 函数 添加 到 AppComponent 中 并 且 把 (click) 事 件 处 理 器 添加 到 <button 
/元 素 上 ， 那 么 每 当 点 击 此 按钮 时 ， 就 会 调用 该 函数 。 注 意 ，addArticle( ) 函数 可 以 接收 两 个 
参数 : title 和 1ink。 我 们 还 要 修改 模板 来 把 它们 传 给 addArticle( )。 

我 们 可 以 通过 为 表单 中 的 input 元 素 添 加 一 个 特殊 的 语法 来 取得 模板 变量 。 修 改 后 的 模板 如 
下 所 示 。 


code/first app/angular2 reddit/src/app/app.component.html 




















«form class-"ui large form segment"» 
«h3 class-"ui header"»Add a Link«/h3» 


«div class-"field'» 

«label for-z"title"»Title:«/label» 

«input name-z"title" snewtitle» «!-- changed --» 
«/div» 
«div class-"field'"» 

«label forz"link"»Link:«/label» 

«input name-z"link" snewlink» «!-- changed --» 
«/div» 


«1-- added this button --» 
«button (click)-"addArticle(newtitle, newlink)" 
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class="ui positive right floated button"» 
Submit link 
«/button» 


«/form» 

注意 ， 我 们 在 input 标 签 上 使 用 了 # (hash) 来 要 求 Angular 把 该 元 素 赋 值 给 一 个 局 部 变量 。 
通过 把 #title 和 #1ink 添 加 到 适当 的 cinput /> 元 素 上 ， 就 可 以 把 它们 作为 变量 传 给 按钮 上 的 
addArticle( ) 函数 ! 

总 结 一 下 ， 我 们 一 共 进 行 了 四 项 修改 : 

(1) 在 模版 中 创建 了 一 个 button 标 签 ， 向 用 户 表明 应 该 点 击 哪里 ; 

(2) 新 建 了 一 个 名 叫 adqdqArticle 的 函数 ,来 定义 按钮 被 点 击 时 要 做 的 事情 ; 

(3) 在 button 上 添加 了 一 个 (cl ick) 属 性 , 意思 是 “只 要 点 击 了 这 个 按钮 , 就 运行 addArticle 
函数 ”; 

(4) 在 两 个 cinput> 标 签 上 分 别 添加 了 #newtitle 和 #newlink 属 性 。 

下 面 我 们 按照 倒序 讲解 每 一 步 。 

1. 绑 定 input 的 值 

注意 ， 第 一 个 输入 标签 是 这 样 的 : 

«input name-z"title" snewtitle» 


这 段 标记 告诉 Angular 把 这 个 <input> 绑 定 到 变量 newtitle 上 。 snewtitleifiE WR Fie 
BESORNSD)， 其 效果 是 让 变量 newtitle 可 用 于 该 视图 的 所 有 表达 式 中 。 

newtitle 现 在 是 一 个 对 象 ， 它 代表 了 这 个 input DOM 元 素 (更 确切 地 说 ， 它 的 类 型 是 
HTMLInputElement ). 由 于 newtitle 是 一 个 对 象 ， 我们 可 以 通过 newtitle.value 表 达 式 来 获取 
这 个 输入 框 的 值 。 

同样 ， 我 们 把 #newlink 添 加 到 了 另 一 个 cinput> 标 签 上 ， 因 此 也 可 以 用 它 来 提取 这 个 输入 机 
的 值 。 

2. 把 事件 绑 定 到 动作 

我 们 在 button 标 签 上 添加 了 属性 (click) 来 定义 点 击 此 按钮 时 应 该 怎么 做 。 当 发 生 (click) 
事件 时 ,我 们 会 调用 addArticle 并 传人 两 个 参数 : newtitle 和 newlink。 这 个 函数 和 这 两 个 参数 
是 从 哪里 来 的 ? 

(1) addArticle 是 组 件 定义 类 AppComponent 里 的 一 个 函数 。 


(2) newtitle 来 自 名 叫 title 的 cinput> 标 签 上 的 解析 (#newtitle )。 
































HH 
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(3) newlink 来 自 名 叫 1ink 的 <input> 标 签 上 的 解析 (#newlink )。 
全 部 合并 起 来 是 这 样 的 : 


<button (click)="addArticle(newtitle, newlink)" 
class-"ui positive right floated button"> 
Submit link 
«/button» 








class-"ui poe right floated button" 4&3 É| Semantic UI， 它 为 这 
个 按钮 提供 了 货 心 悦目 的 绿色 。 


3. 定义 操作 逻辑 
在 class AppComponent 中 ， 我 们 定义 了 一 个 名 叫 aqdArticle 的 新 函数 。 它 接收 两 个 参数 ， 


title 和 1ink。 要 注意 , title 和 1link 都 是 HTMLInputElement 类 型 的 对 象 ， 而 并 非 直 接 输 入 的 值 ; 


mas 要 从 input 中 获取 值 就 得 调用 title.value。 目 前 ,我 们 通过 console. 1og 来 输 
这 些 参数 。 


























code/first app/angular2 reddit/src/app/app.component.ts 


addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean { 
console.log(^Adding article title: $[title.value] and link: $[link.value]^); 
return false; 


J 


Q 注意 ， 我 们 又 在 使 用 反 引 号 字符 串 了 。 这 是 ES6 中 非常 便利 的 一 个 特性 : 反 引 
字符 串 会 展开 模板 变量 ! 
ME 我 们 把 ${title.value} 放 在 了 字符 串 中 , 它 最 终 会 被 替换 成 title.value 
的 值 。 


4. 试 试看 
现在 ， 当 你 点 击 提交 按钮 时 ， 就 能 看 到 这 条 消息 被 打印 到 控制 台中 了 如 图 1-11 所 示 )。 
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9 C € / Wanguar2-SimpleReddt x \ | Nate | 
> Œ fi [D localhost:8080 六 加 六 DO»E 











retook2 Angular 2 Simple Reddit 


Adda Link 
Title: 


Ng Newsletter 


Link: 





http://ng-newsletter.com| 





R 0 Elements Console Sources Network Timeline Profiles Resources Audits i x 
© Y <top frame> v M) Preserve log 


Adding article with title: NG Newsletter and link: http://ng-newsletter.com app.ts:129 
> 








人 1 
图 1-11 点 击 按钮 


1.8.4 添加 文章 组 件 


现在 , 我 们 有 了 一 个 用 来 提交 新 文章 的 表单 ,但 还 没有 在 任何 地 方 展 示 这 些 新 文章 。 因 为 
篇 新 提交 的 文章 都 要 显示 在 本 页 面 的 列表 中 ， 现 在 要 新 建 一 个 组 件 。 


下 面 就 来 新 建 一 个 组 件 ， 用 来 单独 展示 这 些 提交 过 的 文章 ( 如 图 1-12 所 示 )。 


ET 


Angular 2 


3 (angular.io) 


POINTS 
^ upvote wẹ downvote 


图 1-12 一 篇 文章 
为 此 ， 我 们 借助 ng 工具 生成 一 个 新 组 件 : 


ng generate component article 
定义 这 个 新 组 件 总 共用 到 了 三 部 分 代码 : 
(1) 在 模板 中 定义 了 ArticleComponent 的 视图 ; 
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(2) 通过 为 类 加 上 @component 注解 定义 了 Articlecomponent 组 件 的 元 数据 ; 
(3) 定义 了 一 个 组 件 定 义 类 (ArticleComponent )， 其 中 是 组 件 本 身 的 逻辑 。 
下 面 来 深入 讲解 一 下 各 部 分 的 细节 。 

1. 创建 ArticleComponent 的 template 

我 们 使 用 文件 article.component.html 定 义 模板 。 





code/first app/angular2 reddit/src/app/article/article.component.html 


«div class-"four wide column center aligned votes"» 
«div class-"ui statistic"» 
«div class-"value"» 
{{ votes 1] 
«/div» 
«div classz"label"» 
Points 
«/div» 
«/div» 
«/div» 
«div classz"twelve wide column"» 
«a class-"ui large header" href="{{ link }}"> 
{{ title }} 
</a> 
<ul class="ui big horizontal list voters"> 
<li class="item"> 
«a href (click)="voteUp()"> 
<i class="arrow up icon"></i> 
upvote 
</a> 
«/li» 
«li class-"item"» 
«a href (click)z"voteDown()"» 
«i class-"arrow down icon"»«/i» 
downvote 
«/a» 
«/li» 
«/ul» 
«/div» 


这 里 有 很 多 页 面 脚本 ,我们 来 分 解 一 下 ( 如 图 1-13 所 示 )。 


Angular 2 
3 


(angular.io) 


POINTS 
^ Upvote YY downvote 


图 1-13 ”单行 文章 
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我 们 有 两 列 : 
(1) 左 侧 是 投票 的 数量 ; 
(2) 右 侧 是 文章 的 信息 。 


我 们 分 别 用 four wide column 和 twelve wide column 这 两 个 CSS 类 来 指定 这 两 列 。( 记 住 ， 
它们 来 自 Semantic UI 的 CSS 库 。) 











我 们 用 模板 展开 字符 串 {{ votes )) HI(( title }} 来 展示 votes 和 title。 这 些 值 来 自 
ArticleComponent 类 中 的 votes 和 title 属 性 ， 我 们 很 快 就 会 进行 定义 。 

注意 ,我 们 可 以 在 属性 值 中 使 用 模板 字符 串 , 比如 在 a 标签 的 href 属性 中 :href="{{ link }}"。 
在 这 种 情况 下 ，href 的 值 会 根据 组 件 类 的 1ink 属 性 的 值 进行 动态 插值 计算 得 出 。 


在 upvote 和 downvote 的 链接 上 ， 我 们 还 有 一 个 动作 。 只 要 分 别 将 其 按钮 上 的 (click) 绑 定 到 
voteUp( ) 和 voteDown( ) 就 可 以 了 。 当 upvote 按 钮 被 按 下 时 ，ArticleComponent 类 上 的 voteUp() 
函数 就 会 被 调用 ; 当 downvote 按 钮 被 按 下 时 ，voteDown( ) 也 数 会 被 调用 。 




















2. 创建 ArticleComponent 
接 下 来 创建 ArticleComponent。 





code/first app/angular2 reddit/src/app/article/article.component.ts 


GComponent ( f 
selector: 'app-article', 
templateUrl: './article.component.html', 
styleUrls: ['./article.component.css'], 
host: { 
class: 'row' 
j 


D) 


首先 , 我 们 用 ecomponent 定 义 了 一 个 新 组 件 。selector 表 示 会 用 capp-articley 标 签 将 该 组 
件 放 在 页 面 中 (也 就 是 说 ， 该 选择 器 是 一 个 标签 名 )。 


因此 ， 该 组 件 最 基本 的 使 用 方式 就 是 把 下 列 标签 放 在 我 们 的 页 面 脚本 中 : 


«app-article» 
«/app-article» 


当 页 面 被 泻 染 出 来 时 ， 这 些 标 签 仍然 会 留 在 视图 中 。 


我 们 希望 每 个 app-article 都 独占 一 行 。 我 们 使 用 的 是 Semantic UI， 它 提供 了 一 个 用 来 表示 
行 的 CSS 类 ”， 叫 作 row。 


在 Angular 中 ， 组 件 的 宿主 就 是 该 组 件 所 附着 到 的 元 素 。 你 会 注意 到 ， 我 们 在 ecomponent 中 




















(D http://semantic-ui.com/collections/grid.html 
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传人 了 一 个 选项 : host: ( class: 'row' }。 它 告诉 Angular: 我 们 要 在 宿主 元 素 (app-article 








标签 ) 上 设置 class 属 性 ， 使 其 具有 row 类 。 





Q = 这 个 host 选 项 很 不 错 ， 它 意味 着 我 们 可 以 把 app-article 的 页 面 脚本 封装 在 组 
件 之 内 。 也 就 是 说 ， 我 们 不 必 在 使 用 app-article 标 签 
页 面 脚本 具有 class="row" 属性。 借助 host 选 项 ， 


置 宿主 元 素 了 。 


3. 创建 组 件 定义 类 ArticleComponent 
最 后 ， 我 们 来 创建 组 件 定义 类 ArticleComponent 。 





code/first app/angular2 reddit/src/app/article/article.component.ts 


export cl 
votes: 
title: 


ass ArticleComponent implements OnInit { 
number ; 
string; 


link: string; 


constructor() { 


this. 


title - 'Angular 2'; 





this.link = 'http://angular.io'; 
this.votes - 10; 
j 
voteUp() { 
this.votes += 1; 
j 
voteDown() { 
this.votes -- 1; 
j 
ngOnInit() ( 
j 
此 处 我 们 在 ArticleCcomponent 上 创建 了 以 下 三 个 属性 。 
(1) votes: 一 个 数字 ， 用 来 表示 所 有 “ 赞 ” 减 去 所 有 “ 踩 ” 的 数量 之 和 。 
(2) title: 一 个 字符 串 ， 用 来 存放 文章 的 标题 。 
(3) link: 一 个 字符 串 ， 用 来 存放 文章 的 URL。 











在 constructor() 中 ， 我 们 设置 了 一 些 默认 属性 。 


Al 
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code/first app/angular2 reddit/src/app/article/article.component.ts EC 


constructor() { 
this.title - 'Angular 2'; 
this.link = 'http://angular.io'; 
this.votes - 10; 

j 


我 们 还 为 投票 定义 了 两 个 函数 ， 一 个 用 来 “ 赞 ” 的 voteUp 和 一 个 用 来 “ 踩 ” 的 voteDown。 





code/first app/angular2 reddit/src/app/article/article.component.ts 


voteUp() { 
this.votes += 1; 

j 

voteDown() { 
this.votes -- 1; 

j 








在 voteUp 中 ， 我 们 会 把 this .votes 加 一 ; 而 在 voteDown 中 ， 则 会 把 this .votes 减 一 。 








4. 使 用 app-article 组 件 
为 了 用 该 组 件 呈 现 数据 , 我 们 要 把 capp-articley/app-articley> 标 签 添加 到 页 面 脚本 中 的 
某 个 地 方 。 


这 个 例子 中 ， 我 们 希望 让 AppComponent 组 件 来 泻 染 这 个 新 组 件 。 因 此 修改 AppComponent 的 
代码 ， 把 capp-article> 标 签 添 加 到 AppComponent 的 模板 中 ， 紧 跟 在 /form> 标签 后 面 : 





«button (click)-"addArticle(newtitle, newlink)" 
class-"ui positive right floated button"» 
Submit link 
«/button» 
«/ form» 





«div class="ui grid posts"» 
«app-article» 
«/app-article» 

«/div» 


如 果 现 在 刷新 浏览 器， 就 会 看 到 <app-article> 标 签 并 没有 被 编译 。 啊 ?怎么 回 事 ? 

无 论 什么 时 候 遇 到 这 种 问题 , 首先 要 做 的 就 是 打开 浏览 器 的 开发 者 控制 台 。 只 要 审查 一 下 页 
面 脚本 (如 图 1-14 所 示 )， 就 会 看 到 app-article 标 签 已 经 出 现在 页 面 上 了 ,但 是 并 没有 被 编译 。 
这 是 为 什么 呢 ? 


lum. 
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© ® @ / fy anguar2Redáit x W ng-book 
€ Q [| localhost:4200 


[X Ú] Elements Console Sources Network Timeline » 


ng-book 2 Angular 2 Simple Reddit v «form -ngcontent-lif-1 class="ui large form segment > 
Í 


<h3 _ngcontent-lif-1 class="ui header">Add a Link</h3> 





» «div _ngcontent-lif-1 class="field">.</div> 
><div , ngcontent-lif-1 class="field">.</div> 


<button _ngcontent-lif-1 class="ui positive right floated 
button"> 


Submit Link 
AddaLink </button> 
w«div ngcontent-lif-1 class-"ui grid posts" 
A m app-article ngcontent-lif-1 
Title: /app-articte> == $8 
</div> 
:safter 
</form> 
</app-root> 
Link: <!-- «-—- Our app loads here! 一 > 


html body div app-root form.ui.large.form.segment div.uigrid.posts IEEE 
Styles Event Listeners DOM Breakpoints Properties 


:hov 4» .cls Tu 





element.style 4 





.ui.grid»x ( «style».«/style» 
padding-left: 1rem; 
padding-right: 1rem; 





*, :after, :before { «style».«/style» 
box-sizing: inherit; 











inherited trom form.ui.large.form.segment | 
„ui. large. form { «style».«/style»| Filter Show all 
font-size: 1.14285714rem; 
> box-sizing border-. 
.ui.form { <style>..</style>|” Color 图 rgba(~ 
idus " display block 
} » font-family Lato, "u 
» font-size 16px 





图 1-14 ”审查 DOM 时 未 能 展开 的 标记 


之 所 以 出 现 这 种 情况 , 是 因为 AppComponent 组 件 目前 还 不 知道 这 个 ArticleComponent 组 件 。 


Q AngularJS H P i£: 如 果 你 用 过 AngularJS， 可 能 会 惊讶 于 本 应 用 不 知道 这 个 新 
的 app-article 组 件 。 这 是 因为 在 AngularJS 中 ，, 指令 的 匹配 是 全 局 的 ; 而 Angular 
中 ， 你 需要 明确 指定 要 使 用 哪个 组 件 〈 即 哪个 选择 器 )。 
一 方面 ， 这 需要 一 点 配置 ; 但 另 一 方面 ， 这 对 于 构建 可 伸缩 的 应 用 是 非常 用 
助 的 ， 因 为 这 意味 着 我 们 不 必 被 迫 在 全 局 命名 空间 中 共享 这 些 指令 选择 器 。 


为 了 把 这 个 新 的 ArticleCcomponent 组件 引 荐 给 AppComponent ， 我 们 需要 把 Article- 
Component 添 加 到 NgModule 的 declarations 列 表 中 。 


之 所 以 要 把 ArticleComponent 添加 到 declarations 中 ， 是 因为 Article- 
Component 是 该 模块 ( RedditAppModule ) 的 一 部 分 。 然 而 ， 如 果 Article- 
Component 是 其 他 模块 的 一 部 分 ， 可 能 就 得 通过 imports 来 导入 它 了 。 

后 面 还 会 更 深入 地 讨论 NgModule ， 现 在 你 只 需要 知道 : 当 创 建新 组 件 时 ， 必 须 
同时 把 它 放 进 NgModule 的 declarations 中 。 
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code/first app/angular2 reddit/src/app/app.module.ts mM 


import ( AppComponent } from './app.component'; 
import ( ArticleComponent ) from './article/article.component.ts'; 


GNgModule( 1 
declarations: [ 
AppComponent , 
ArticleComponent // «-- added this 


l, 
我 们 在 这 里 : 
(1) 用 import 导 入 ArticleComponent; 














(2) 把 ArticleComponent 添 加 到 declarations 列 表 中 。 
把 ArticleComponent 添 加 到 NgModule 的 declarations 中 之 后 ， 如 果 刷 新 浏览 器 ， 就 会 看 到 


Li 


该 文章 正确 演 染 出 来 了 (如 图 1-15 所 示 )。 














| ng-book | 





eoo E Angular2 - Simpie Reddit x 


€ > Q 0 localhost:8080 zs 








ww» Angular 2 Simple Reddit 


Add a Link 


Title: 


Link: 


Angular 2 


10 


POINTS ^^ upvote YY downvote 








图 1-15 i4 ArticleComponent?HffF 
不 过 ， 如 果 你 尝试 点 击 “ 赞 ”或 “ 踩 ”的 链接 ， 就 会 看 到 该 页 面 发 生 了 预料 之 外 的 刷新 。 


在 默认 情况 下 ，JavaScript 会 把 click 事 件 冒 泡 到 所 有 父 级 组 件 中 。 因 为 click 事 件 被 冒 泡 到 了 
父 级 ,浏览 絮 就 会 尝试 导航 到 这 个 空白 链接 ， 于 是 浏览 器 就 重新 刷新 了 。 
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要 解决 这 个 问题 ， 我 们 得 让 click 的 事件 处 理 咒 返回 false。 这 能 确保 浏览 需 不 会 尝试 刷新 
页 面 。 我 们 要 修改 代码 ， 以 便 让 每 一 个 voteUp( ) 和 voteDown( ) 函数 都 返回 一 个 布尔 值 false ( 告 
诉 浏 览 器 不 要 向 上 冒 泡 ): 

voteDown(): boolean { 

this.votes -- 1; 


return false; 


j 

// and similarly with ^voteUp()^ 

ME, 如果 你 点 击 这 些 链接 ,就 会 看 到 投票 数 正确 地 增加 或 减少 了 ， 而且 没有 出 现 多 余 的 页 
面 刷新 。 














1.0 ERIT 


目前 ， 在 页 面 上 只 有 一 篇 文章 ， 而 且 也 没 法 演 染 更 多 了 ， 除非 我 们 复制 一 个 capp-article> 
标签 。 但 即使 这 样 做 ， 所 有 的 文章 也 都 会 具有 相同 的 内 容 ， 这 可 不 是 我 们 想 要 的 。 





1.9.1 创建 Article 类 


T Angular 代 码 时 的 最 佳 实践 之 一 就 是 尝试 从 组 件 代 码 中 把 你 正在 使 用 的 数据 结构 隔离 出 
来 。 要 做 到 这 一 点 ， 就 要 创建 一 个 数据 结构 ， 用 以 表示 单个 文章 。 下 面 就 创建 一 个 新 文件 
article.model.ts 来 定义 所 需 的 Article 类 吧 。 























code/first app/angular2 reddit/src/app/article/article.model.ts 


export class Article { 
title: string; 
link: string; 
votes: number; 


constructor(title: string, link: string, votes?: number) { 
this.title - title; 
this.link - link; 
this.votes = votes || 9; 
j 
j 
此 处 , 我 们 创建 了 一 个 新 类 , 用 来 表示 Article。 注意 , 这 是 一 个 普通 类 而 不 是 Angular 组 件 。 
在 MVC 模 式 中 ， 它 被 称 为 模型 ( model )。 


每 篇 文章 都 有 一 个 标题 title 、 一 个 链接 link 和 一 个 投票 总 数 votes 。 当 创建 新 文章 时 ， 我 
们 需要 title 和 1ink。votes 参 数 是 可 选 的 ( 用 末尾 的 ? 标 出 来 )， 并 且 默 认为 0。 


现在 ,我 们 来 修改 ArticleComponent 的 代码 ， 让 它 使 用 新 的 Article 类 。 以 前 是 直接 把 这 些 
属性 存 到 ArticleComponent 组 件 上 ， 现 在 则 把 它 改 为 存 到 Article 类 的 一 个 实例 上 。 
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code/first app/angular2 reddit/src/app/article/article.component.ts 
export class ArticleComponent implements OnInit { 


article: Article; 


constructor() ( 
this.article - new Article( 
'Angular 2', 
'http://angular.io', 
10); 
j 


voteUp(): boolean { 
this.article.votes += 1; 
return false; 


voteDown(): boolean { 
this.article.votes -- 1 
return false; 


j 


ngOnInit() ( 


注意 我 们 改动 了 什么 : 以 前 我 们 直接 把 title 、link 和 votes 属 性 存 到 该 组 件 上 ， 而 现在 则 
存储 一 个 对 article 的 引用 。 把 article 变 量 的 类 型 设置 成 新 的 Article 类 ， 代 码 变 整洁 了 。 


接 下 来 修改 voteUp (以 及 voteDown ) 时 ， 我 们 不 再 递增 组 件 上 的 votes 了 ， 而 是 需要 递增 
article 上 的 votes。 


这 次 重 构 还 引入 了 男 一 项 修改 : 我 们 需要 修改 视图 代码 ， 从 正确 的 位 置 获取 模板 变量 。 这 样 


我 们 就 要 修改 模板 中 的 标签 ， 使 其 从 article 中 读 取 。 也 就 是 说 ， 我 们 以 前 用 的 是 {{ votes }}, 
而 现在 要 改 成 {{ article.votes }}。 






























































code/first app/angular2 reddit/src/app/article/article.component.html 


«div class-"four wide column center aligned votes"» 
«div class="ui statistic"» 
«div class-'"value"» 
{{ article.votes }} 
«/div» 
«div classz"label"» 
Points 
«/div» 
«/div» 
«/div» 
«div class-z"twelve wide column"» 
«a class-"ui large header" href="{{ article.link }}"> 
{{ article.title }} 
«/a» 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 





38 第 1 章 编写 你 的 第 一 个 Angular Web 应 用 





«ul class="ui big horizontal list voters"» 
«li class-"item"» 
«a href (click)-"voteUp()"» 
«i class-"arrow up icon"»«/i» 
upvote 
«/a» 
«/li» 
«li class-"item"» 
«a href (click)z"voteDown()"» 
«i class-"arrow down icon"»«/i» 
downvote 
«/a» 
«/li» 
«/ul» 
«/div» 


刷新 浏览 器 ， 仍 然 一 切 正常 。 





情况 好 多 了 , 但 还 是 有 些 代 码 不 尽 如 人 意 : voteup 和 voteDown 方 法 打破 了 Article 类 的 封装 ， 


因为 它们 直接 修改 了 文章 的 内 部 属性 。 





当前 的 voteUp 和 voteDown 违 反 了 过 米 特 法 则 ”。 迪 米 特 法 则 是 指 : 一 个 对 象 对 


其 他 对 象 的 结构 或 属性 所 作 的 假设 应 该 越 少 越 好 。 


问题 在 于 ArticleComponent 组 件 了 解 太 多 Article 类 的 内 部 知识 了 。 要 解决 这 一 点 ， 就 要 为 


Articl e 类 添加 voteUp 和 voteDown 方 法 。 


code/first app/angular2 reddit/src/app/article/article.model.ts 


export class Article { 
title: string; 
link: string; 
votes: number; 


constructor(title: string, link: string, votes?: number) { 
this.title - title; 
this.link - link; 
this.votes = votes || 0; 


} 


voteUp(): void { 
this.votes += 1; 


j 
voteDown(): void { 
this.votes -- 1; 


} 


domain(): string { 





(D http://en.wikipedia.org/wiki/Law_of Demeter 
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try { 
const link: string - this.link.split('//')[1]; 
return link.split('/')[0]; 
catch (err) ( 
return null; 
j 

j 

j 


然后 可 以 修改 ArticleComponent 组 件 来 调用 这 些 方法 。 





ny 


code/first_app/angular2_reddit/src/app/article/article.component.ts 


export class ArticleComponent implements OnInit { 
article: Article; 


constructor() { 
this.article = new Article( 
'Angular', 
'http://angular.io', 
10); 
j 


voteUp(): boolean { 
this.article.voteUp(); 
return false; 


j 


voteDown(): boolean { 
this.article.voteDown(); 
return false; 


j 


ngOnInit() ( 


© 为 什么 模型 和 组 件 中 都 有 一 个 voteUp 函 数 ? 

原因 在 于 ， 这 两 个 函数 所 做 的 事情 略 有 不 同 。ArticleComponent 上 的 
voteUp() 函数 是 与 组 件 的 视图 有 关 的 ， 而 Article 模 型 上 的 voteUp() 定 义 了 
模型 上 的 变化 。 
也 就 是 说 ， 当 投票 时 , Article 类 可 以 对 模型 上 的 相应 功能 进行 封装 。 在 真实 的 
应 用 中 ，Article 模 型 的 内 部 可 能 更 加 复杂 ， 比 如 向 Web 服 务 器 发 起 一 个 API 调 
用 ， 而 你 显然 不 希望 这 些 本 属于 模型 的 代码 出 现在 组 件 的 控制 器 中 。 
同样 ， 在 ArticleComponent 中， 我 们 return false; 从 而 “阻止 事件 冒 泡 ”。 这 是 
属于 视图 的 逻辑 片段 ,我 们 不 希望 Article 模 型 上 的 voteUp( ) 函数 懂得 这 些 与 视图 
有 关 的 API。 也 就 是 说 ，Article 模 型 应 该 让 投票 逻辑 从 特定 的 视图 中 分 离 出 来 。 
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在 刷新 浏览 器 之 后 ， 仍 然 一 切 正 常 ， 但 我 们 已 经 有 了 更 加 清晰 、 更 加 简单 的 代码 。 


e 查看 现在 的 ArticleComponent 组 件 定义 会 发 现 : CKT! RMK ERA 
a a 放 进 了 模型 中 。 与 此 对 应 的 MVC 指 南 应 该 是 “ 胖 模 型 、 皮 包 骨 的 控制 
RPO, 其 核心 思想 是 , 我 们 要 把 大 部 分 领域 逻辑 移 到 模型 中 ， 以便 让 组 件 只 做 

尽 可 能 Eua r4. 


1.9.20 ”存储 多 篇 文章 
我 们 再 写 点 代码 ， 展 示 有 多 个 Article 的 列表 。 


从 让 AppComponent 拥 有 一 份 文章 集合 开始 。 


code/first app/angular2 reddit/src/app/app.component.ts 





export class AppComponent { 
articles: Article[]; 


constructor() { 
this.articles - [ 
new Article('Angular 2', 'http://angular.io', 3), 
new Article('Fullstack', 'http://fullstack.io', 2), 
new Article('Angular Homepage', 'http://angular.io', 1), 
]; 
j 


addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean { 
console.log(^Adding article title: $[title.value] and link: $[link.value]^); 
this.articles.push(new Article(title.value, link.value, 0)); 
title.value = '' 
link.value = '' 
return false; 


} 
} 


注意 我 们 的 AppComponent 中 多 了 这 一 行 : 

articles: Article[]; 

Article[] 看 起 来 可 能 有 点 陌生 。 这 里 的 意思 是 articles 是 Article 的 数组 。 另 一 种 写法 是 
Array<Article>。 这 种 模式 被 称 为 泛 型 。Java、C# 和 一些 别 的 语言 中 都 有 这 个 概念 ， 意 思 是 你 
的 集合 (Array ) 是 有 类 型 的 。 也 就 是 说 ，Array 是 一 个 集合 ， 它 只 能 存放 Article 类 型 的 对 象 。 

我 们 通过 在 构造 函数 中 设置 this.articles 来 初始 化 这 个 数组 


code/first app/angular2 reddit/src/app/app.component.ts 


F 


1 





















































o 


constructor() { 





(D http://weblog.jamisbuck.org/2006/10/18/skinny-controller-fat-model 
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this.articles = [ 
new Article('Angular 2', 'http://angular.io', 3), 
new Article('Fullstack', 'http://fullstack.io', 2), 


new Article('Angular Homepage', 'http://angular.io', 1), 
]; 
} 


1.9.3 使 用 inputs 配置 ArticleComponent 


现在 ,我们 已 经 有 了 一 个 Article 模 型 的 列表 , 该 怎么 把 它们 传 给 ArticleComponent 组 件 呢 ? 
这 里 我 们 又 用 到 了 Input。 以 前 ArticleComponent 类 的 定义 是 下 面 这 样 的 。 





code/first app/angular2 reddit/src/app/article/article.component.ts 


export class ArticleComponent implements OnInit { 
article: Article; 


constructor() { 
this.article - new Article( 
'Angular 2', 
'http://angular.io', 
10); 
} 


问题 的 关键 是 ， 我 们 在 构造 函数 中 硬 编码 了 一 个 特定 的 Article; 而 制作 组 件 时 ， 不 但 要 能 
封装 ， 还 要 能 复 用 。 

我 们 真正 想 做 的 是 配置 要 显示 的 Article。 比 如 ,假设 我 们 有 article1 和 article2 两 篇 文章 ， 
那 就 要 支持 把 一 个 Article 型 的 “参数 ” 传 给 组 件 来 复 用 app-article 组 件 ， 就 像 这 样 : 


<app-article [article]-"article1"»«/app-article» 
«app-article [article]-"article2"»«/app-article» 


Angular 通 过 Component 上 的 Input 注 解 来 支持 我 们 这 样 做 : 


class ArticleComponent { 
GInput() article: Article; 
Ho 





















































现在 ， 如 果 我 们 有 一 个 Article 型 的 变量 myArticle ， 就 可 以 把 它 传 给 视图 中 的 Article- 
Component 了 。 记 住 ， 可 以 用 方 括号 包 庄 一 个 变量 来 把 它 传 给 元 素 ， 就 像 这 样 ; 

«app-article [article]-"myArticle"»«/app-article» 

注意 这 里 的 语法 : 我 们 把 输入 属性 的 名 字 放 人 方 括号 中 ( [article] )， 而 该 属性 的 值 就 是 我 
们 要 传 给 此 输入 属性 的 那个 。 

接 下 来 ， 重点 是 ArticleComponent 实 例 上 的 this.article 将 被 设置 成 myArticle。 我 们 可 
以 把 这 个 过 程 看 作 将 myArticle 变 量 作 为 一 个 参数 传 给 (也 就 是 输入 给 ) 了 我 们 的 组 件 。 


ArticleComponent 组 件 使 用 @Input 之 后 变 成 了 下 面 这 样 。 


























ni 
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code/first app/angular2 reddit/src/app/article/article.component.ts 


export class ArticleComponent implements OnInit { 
GInput() article: Article; 


voteUp(): boolean { 
this.article.voteUp(); 
return false; 


} 


voteDown(): boolean { 
this.article.voteDown(); 
return false; 


} 





ngOnInit() { 
} 


1.9.4 泻 染 文章 列表 

我 们 之 前 配置 过 AppComponent 来 存储 articles 数 组 。 这 次 我 们 要 配置 AppComponent 来 泻 染 
所 有 articles。 要 实现 这 个 功能 ， 就 不 能 单独 使 用 capp-article> 标 签 了 ， 而 要 用 NgFor 指 令 在 
articles 数 组 上 进行 迭代 ， 并 为 其 中 的 每 一 个 都 泻 染 一 份 app-article。 

把 下 列 内 容 添 加 到 AppComponent 前 面 ecomponent 注 解 的 template 属 性 中 ， 紧 跟着 </formy 
标签 ; 








Submit link 
«/button» 
«/ form» 


«1l-- start adding here --» 
«div class="ui grid posts"» 
«app-article 
«ngFor-"let article of articles" 
[article]-"article"» 
«/app-article» 
«/div» 
«1-- end adding here --» 


还 记得 我 们 之 前 用 过 NgFor 指 令 把 名 称 列 表 泻 染 成 无 序列 表 吗 ? 它 在 泻 染 多 个 组 件 时 也 同样 
适用 。 

xngFor="let article of articles" 请 法 会 对 articles 列 表 进 行 迭代 ， 并 日 为 列表 中 的 每 
一 个 条 目 创 建 一 个 局 部 变量 article。 


要 为 组 件 指 定 一 个 输入 属性 article, 就 要 使 用 [inputName]="inputValue" 表 达 式 。 在 这 个 
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例子 中 ， 该 表达 式 的 意思 是 : 我 们 要 把 输入 属性 article 设 置 为 局 部 变量 article 的 值 ， 而 后 者 M 
是 由 ngFor 所 设置 的 。 








Qe article 变 量 在 这 个 代码 片段 中 出 现 的 次 数 太 多 了 。 如 果 我 们 把 NgFor 创 建 的 临 
时 变量 命名 为 foobar ， 或 许 更 清楚 一 些 ， 
«app-article 
*ngFor-"let foobar of articles" 
[article]-"foobar"» 
«/app-article» 
那么 ， 这 里 就 有 了 三 个 变量 : 
(l) articles 是 一 个 Article 的 数组 ， 由 AppComponent 组 件 定义 ; 
(2) foobar 是 一 个 articles 数 组 中 的 单个 元 素 ( 一 个 Article 对 象 ), 由 NgFor 定 义 ; 
(3) article 是 一 个 字段 名 ， 由 ArticleComponent 中 的 inputs 属 性 定义 。 
本 质 上 ，NgFor 首 先生 成 了 一 个 临时 变量 foobar ， 然 后 我 们 把 它 传 给 了 app- 


article, 


刷新 浏览 器 ， 就 会 看 到 所 有 的 文章 都 泻 染 出 来 了 ( 如 图 1-16 所 示 )。 


O9 € 9 / ganguar2-SimpleReddt x /— ng-book | 


CŒ [D localhost:8080 ES 
| 





ngbook2 Angular 2 Simple Reddit 


Adda Link 


Title: 


Link: 





Angular 2 
3 


POINTS ^^ upvote YY downvote 


Fullstack 


POINTS 个 upvote «y downvote 


Angular Homepage 


POINTS 个 upvote YY downvote 





K-16 AR» 


图 灵 社 区 会 员 xiaochao12312312ff(499290328(9 qq.com) zs 尊重 版 权 


44 第 1 章 编写 你 的 第 一 个 Angular Web 应 用 





1.10 ”添加 新 文章 


现在 ,我们 需要 修改 addArticle 以 便 在 按 下 按钮 时 实际 添加 一 篇 新 文章 。 修 改 addArticle 
方法 ,使 其 变 成 下 面 这 样 。 


code/first app/angular2 reddit/src/app/app.component.ts 





addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean { 
console.log(^Adding article title: $[title.value] and link: $[link.value]^); 
this.articles.push(new Article(title.value, link.value, 0)); 
title.value = '' 
link.value = '' 
return false; 


j 
这 将 会 : 
(1) 创建 一 个 具有 所 提交 标题 和 URL 的 Article 新 实例 ; 
(2) 把 它 加 入 Article 数 组 ; 
(3) 清除 input 字 段 的 值 。 


, 


, 





我 们 要 如 何 清 除 input 字 段 的 值 呢 ? 回忆 一 下 ，title 和 1link 都 是 HTMLInput- 
Element 对 象 。 这 就 意味 着 我 们 可 以 设置 它们 的 属性 。 当 我 们 修改 value 属 性 时 ， 
页 面 中 的 input 标 签 也 会 跟着 改变 。 


在 输入 框 中 添加 新 文章 ， 并 点 击 Submit Link 之 后 ， 就 会 看 到 新 的 文章 添加 成 功 了 ! 
1.11 最 后 的 修整 


1.11.1. 显示 文章 所 属 的 域名 
我 们 先 为 链接 添加 一 个 提示 信息 ， 以 便 在 用 户 点 击 链接 时 显示 将 重 定向 到 的 域名 。 
把 qomain 方 法 添加 到 Article 类 中 。 





code/first app/angular2 reddit/src/app/article/article.model.ts 


domain(): string { 
try { 
const link: string = this.link.split('//')[1]; 
return link.split('/')[0]; 
) catch (err) { 
return null; 
j 
j 
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A 








巴 对 该 函数 的 调用 添加 到 ArticleCcomponent 的 模板 中 


«div classz"twelve wide column"» 
«a class-"ui large header" href="{{ article.link }}"> 
{{ article.title }} 
«/a» 
«1-- right here --» 
«div class-"meta"»((( article.domain() ]])«/div» 
«ul class-"ui big horizontal list voters"» 
«li classz"item"» 
«a href (click)z"voteUp()"» 


现在 ， 当 我 们 刷新 浏览 器 时 ,就 能 看 到 每 个 URL 所 属 的 域名 了 ( 注意 : URL 必 须 包含 http:// )。 








1.11.2 ”基于 分 数 重新 排序 
如 果 你 点 击 并 投票 ， 就 会 发 现 有 些 事情 不 太 对 劲 : 这 些 文章 并 没有 基于 分 数 排序 ! 显然 , 我 
们 更 希望 让 分 数 最 高 的 条 目 显 示 在 顶部 ， 让 低 分 条 目 沉 到 底部 。 


我 们 把 articles 存 储 在 了 AppComponent 类 中 ， 但 这 个 数组 是 无 序 的 。 处 理 这 种 情况 的 简单 
方式 是 在 AppComponent 上 创建 一 个 新 方法 sortedArticles。 















































code/first app/angular2 reddit/src/app/app.component.ts 


sortedArticles(): Article[] { 
return this.articles.sort((a: Article, b: Article) -» b.votes - a.votes); 


} 
这 样 ， 在 ngFor 中 ， 我 们 就 可 以 在 sortedArticles() 上 而 不 是 直接 在 articles 上 迭代 了 : 


«div class-"ui grid posts"» 
«app-article 
xngFor-"let article of sortedArticles()" 
[article]-"article"» 
«/app-article» 
«/div» 





1.42 全 部 代码 


在 本 章 中 , 我 们 浏览 了 代码 中 的 很 多 小 片段 。 你 可 以 到 本 书 示例 代码 的 下 载 站 点 找到 该 应 用 
的 全 部 文件 和 完整 的 TypeScript 代 码 。 


1.43 总结 


完工 ! 我 们 已 经 创建 了 自己 的 第 一 个 Angular 应 用 。 还 不 错 ， 对 吧 ? 不 过 我 们 还 会 学 到 更 多 : 
图 解数 据 流 、 发 起 AJAX 请 求 、 内 置 指令 、 路 由 、 操 纵 DOM， 等 等 。 








Mz 
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现在 ， 好 好 享受 成 功 的 喜悦 吧 ! 很 多 Angular 程 序 的 写法 都 和 我 们 刚刚 所 做 的 类 似 : 
(1) 把 应 用 拆 分 成 组 件 ; 
(2) 创建 视图 ; 





(4) 显示 模型 ; 
(5) 添加 交互 。 
在 后 面 的 章节 中 ， 我 们 将 讲解 用 Angular 编 写 各 种 复杂 应 用 的 全 部 知识 。 





1.44 ”获得 帮助 
如 果 你 有 关于 本 章 的 任何 问题 ， 比 如 发 现 了 bug 或 在 运行 代码 时 遇 到 问题 ， 欢 迎 告诉 我 们 ! 


Q (英文 ) 加 入 我 们 的 免费 社区 ， 在 Gitter 上 跟 我 们 聊 聊 : https:/gitterimmg-bookmng-book。 
口 (EX) 直接 给 我 们 发 送 邮 件 : us@fullstack.io。 

口 〈 中 文 ) 如 果 是 与 中 文 版 相关 的 问题 与 勘误 , 请 访问 我 们 的 GitHub: https://github.com/ng- 
book2/book。 

a CPX) 获取 官方 文档 中 文 版 ， 请 访问 angularcn。 

O (CPX) 如 果 想 了 解 本 书 范围 之 外 的 问题 ， 请 访问 wx.angularcn 疝 我 们 提问 。 

O (中文) 要 了 解 Angular 的 最 新 消息 ， 欢 迎 搜索 并 关注 微 信 公众 号 : Angular 中 文 社区 。 


继续 前 进 吧 
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2.1 Angular 是 用 TypeScript 构建 的 


Angular 是 用 一 种 类 似 于 JavaScript 的 语言 一 一 TypeScript 一 构建 的 。 

或 许 你 会 对 用 新 语言 来 开发 Angular 心 存疑 虑 ， 但 事实 上 ， 在 开发 Angular 应 用 时 ,我们 有 充 
分 的 理由 用 TypeScript 代 替 普 通 的 JavaScript。 

TypeScript 并 不 是 一 门 全 新 的 语言 ， 而 是 ES6 的 超 集 。 所 有 的 ES6 代 码 都 是 完全 有 效 且 可 编译 
的 TypeScript 代 码 。 图 2-1 展 示 了 它们 之 间 的 关系 。 









































/ TypeScript 
/ “一 类 型 een 


| cue 
| ES6 
类 


- 模块 p— 


ES5 


图 2-1 ES5、ES6 和 TypeScript 








(D http://www.typescriptlang.org/ 
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什么 是 ES5? 什么 是 ES6? ES5 是 ECMAScript 5 的 缩写 ， 也 被 称 为 “普通 的 
JavaScript”。ES5 就 是 大 家 熟知 的 JavaScript, 它 能 够 运行 在 大 部 分 浏览 器 上 。ES6 
则 是 下 一 个 版 本 的 JavaScript， 在 后 续 章节 中 我 们 还 会 深入 讨论 它 。 


在 本 书 出 版 的 时 候 , 支持 ES6 的 浏览 器 还 很 少 , 更 不 用 说 TypeScript 了 。 我 们 用 转译 器 来 解决 
这 个 问题 。TypeScript 转 译 吉 能 把 TypeScript 代 码 转换 为 几乎 所 有 浏览 器 都 支持 的 ES5 代 码 。 





从 TypeScript 代 码 到 ES 代码 的 唯一 转换 器 是 由 TypeScript 核 心 团队 编写 的 。 然 
而 ， 将 ES6 代 码 (不 是 TypeScript 代 码 ) 转换 到 ES5 代 码 则 有 两 个 主要 的 转换 器 : 
Google 开 发 的 Traceur 55 JavaScript IX 4) x£ 8 Babel? 。 在 本 书 中 我 们 并 不 会 直接 
使 用 它们 ， 但 它们 也 是 值得 了 解 的 不 错 项 目 。 

我 们 在 上 一 章 安装 了 TypeScript 环 境 ， 如 果 你 是 从 本 章 开 始 学 习 的 ， 那 么 可 以 这 
样 安装 TypeScript 环 境 : npm install -g typescript。 

















TypeScript 是 Microsoft 和 Google 之 间 的 官方 合作 项 目 。 有 这 两 家 强 有 力 的 科技 巨头 在 背后 支 
撑 ， 对 于 我 们 来 说 是 个 好 消息 ， 因 为 这 表示 TypeScript 将 会 得 到 长 期 的 支持 。 这 两 家 公司 都 承诺 
全 力 推动 Web 技 术 的 发 展 ， 我 们 这 些 开 发 人 员 显 然 会 获 益 菲 浅 。 

另外 , 转译 器 的 好 处 还 在 于 : 它 允 许 小 型 团队 对 语言 进行 改善 ， 而 不 必要 求 所 有 人 都 去 升级 
他 们 的 浏览 器 。 

需要 指出 的 是 : TypeScript 并 不 是 开发 Angular 应 用 的 必 选 语言 。 我 们 同样 可 以 使 用 ES5 代 码 
( 即 “ 普 通 ”JavaScript ) 来 开发 Angular 应 用 。Angular 也 为 全 部 功能 提供 了 ES5 API。 那 么 为 什么 
我 们 还 要 使 用 TypeScript 呢 ?” 这 是 因为 TypeScript 有 不 少 强 大 的 功能 ， 能 极 大 地 简化 开发 。 




























































































2.2 TypeScript 提供 了 哪些 特性 


TypeScript 相 对 于 ESS 有 五 大 改善 : 
口 类 型 

口 类 

口 注解 

Q 模块 导入 

口 语言 工具 包 ( 比如， 解构 ) 


接 下 来 我 们 逐个 介绍 。 








(D https://github.com/google/traceur-compiler 
(25 https://babeljs.io/ 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 





2.3 ”类 型 


顾名思义 ， 相 对 于 ES6，TypeScript 最 大 的 改善 是 增加 了 类 型 系统 。 









































有 些 人 可 能 会 觉得 , 缺乏 类 型 检查 正 是 JavaScript 这 些 弱 类 型 语言 的 优点 。 也许 你 对 类 3 
心 存疑 虑 ， 但 我 仍然 鼓励 你 试 一 试 。 类 型 检查 的 好 处 有 : 

(1) 有 助 于 代码 的 编写 ， 因 为 它 可 以 在 编译 期 预防 bug; 

(2) 有 助 于 代码 的 阅读 ， 因 为 它 能 清晰 地 表明 你 的 意图 。 

另外 值得 一 提 的 是 ，TypeScript 中 的 类 型 是 可 选 的 。 如 果 和 希望 写 一 些 快速 代码 或 功能 原型 ， 
可 以 首先 省 略 类 型 ， 然 后 再 随 着 代码 日 趋 成 熟 逐 渐 加 上 类 型 。 

TypeScript 的 基本 类 型 与 我 们 平时 所 写 JavaScript 代 码 中 用 的 隐 式 类 型 一 样 ， 包 括 字符 串 、 数 
字 、 布 尔 值 等 。 

直到 ES5， 我 们 都 在 用 var 关 键 字 定义 变量 ， 比 如 var name; 。 

TypeScript 的 新 语法 是 从 ES5 自 然 演化 而 来 的 ， 仍 沿用 var 来 定义 变量 ,但 现在 可 以 同时 为 变 
量 名 提供 可 选 的 变量 类 型 了 : 

var name: string; 

EFI PRAISE, E T EAS RAAR Inl (ER EA: 

function greetText(name: string): string { 

return "Hello " + name; 

j 

这 个 例子 中 , 我 们 定义 了 一 个 名 为 greetText 的 新 函数 , 它 接 收 一 个 名 为 name 的 参数 。name: 
string 语 法 表示 函数 想 要 的 name 参 数 是 string 类 型 。 如 果 给 该 函数 传 一 个 string 以 外 的 参数 ， 
代码 将 无 法 编译 通过 。 对 我 们 来 说 ， 这 是 好 事 ， 和 否则 这 段 代码 将 会 引入 bug。 

或 许 你 还 注意 到 了 ，greetText 国 数 在 括号 后 面 还 有 一 个 新 语法 :string {。 冒 号 之 后 指定 
的 是 该 函数 的 返回 值 类 型 ,在 本 例 中 为 string。 这 很 有 用 ,原因 有 二 : 如 果 不 小 心 让 函数 返回 了 
一 个 非 string 型 的 返回 值 , 编译 器 就 会 告诉 我 们 这 里 有 错误 ; 使 用 该 函数 的 开发 人 员 也 能 很 清晰 
地 知道 自己 将 会 拿 到 什么 类 型 的 数据 。 

我 们 来 看 看 如 果 写 了 不 符合 类 型 声明 的 代码 会 怎样 : 


function hello(name: string): string { 
return 12; 


d 
EP 
p 































































































j 
当 尝试 编译 代码 时 ， 将 会 得 到 下 列 错误 : 


$ tsc compile-error.ts 
compile-error.ts(2,12): error TS2322: Type 'number' is not assignable to type 'string'. 
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这 是 怎么 回 事 ? 我 们 尝试 返回 一 个 number 类 型 的 12 ， 但 hello 国 数 期 望 的 返回 值 类 型 为 
string ( 它 是 在 参数 声明 的 后 面 以 ): string {的 形式 声明 的 )。 
要 纠正 它 ， 可 以 把 函数 的 返回 值 类 型 改 为 number : 


function hello(name: string): number { 
return 12; 


























j 

虽然 这 只 是 一 个 小 例子 ， 但 足以 证 明 类 型 检查 能 为 我 们 节省 大 量 调 试 bug 的 时 间 。 

现在 知道 了 如 何 使 用 类 型 , 但 怎么 才能 知道 有 哪些 可 用 类 型 呢 ? 接 下 来 我 们 就 会 罗列 出 这 些 
内 置 的 类 型 ， 并 教 你 如 何 创 建 自己 的 类 型 。 








尝试 REPL 


为 了 运行 本 章 中 的 例子 , 我 们 要 先 安装 一 个 小 工具 , 名 为 TSUNY ( TypeScript Upgraded Node, 
支持 TypeScript 的 升级 版 Node ): 


$ npm install -g tsun 
接着 启动 它 : 


$ tsun 

TSUN : TypeScript Upgraded Node 

type in TypeScript expression to evaluate 
type :help for commands in repl 





$ 


这 个 小 小 的 > 是 一 个 命令 提示 符 ， 表 示 TSUN 已 经 准备 好 接收 命令 了 。 
对 于 本 章 后 面 的 大 部 分 例子 ， 你 都 可 以 复制 粘贴 到 这 个 终端 窗口 中 运行 。 





24 内 置 类 型 


2.4.1 字符 串 


字符 串 包含 文本 ， 声 明 为 string 类 型 : 


var name: string = 'Felipe'; 




















无 论 整数 还 是 浮 点 ， 任 何 类 型 的 数字 都 属于 number 类 型 。 在 TypeScript 中 ， 所 有 的 数字 都 是 














(D https:;//github.com/HerringtonDarkholme/typescript-repl 
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用 浮 点 数 表示 的 ， 这 些 数字 的 类 型 就 是 number : 


var age: number = 36; 





2.4.3 布尔 类 型 


布尔 类 型 (boolean) 以 true ( 真 ) 和 false CIEL) 为 值 。 


var married: boolean = true; 


2.4.4 数组 




















数组 用 Array 类 型 表示 。 然 而 ， 因 为 数组 是 一 组 相同 数据 类 型 的 集合 ， 所 以 我 们 还 需要 为 数 
组 中 的 条 目 指 定 一 个 类 型 。 


我 们 可 以 用 Array<type> 或 者 type[] 语 法 来 为 数组 条 目 指 定 元 素 类 型 : 





var jobs: Array«string» = ['IBM', 'Microsoft', 'Google']; 
var jobs: string[] = ['Apple', 'Dell', 'HP']; 

数字 型 数组 的 声明 与 之 类 似 : 

var jobs: Array«number» = [1, 2, 3]; 


var jobs: number[] - [4, 5, 6]; 


2.4.5 ME 
枚 举 是 一 组 可 命名 数值 的 集合 。 比 如 ， 如 果 我 们 想 拿 到 某 人 的 一 系列 角色 ， 可 以 这 么 写 : 


enum Role [Employee, Manager, Admin]; 
var role: Role - Role.Employee; 


默认 情况 下 ， 枚 举 类 型 的 初始 值 是 0。 我 们 也 可 以 调整 初始 化 值 的 范围 


enum Role [Employee = 3, Manager, Admin]; 
var role: Role - Role.Employee; 


在 上 面 的 代码 中 ，Employee 的 初始 值 被 设置 为 3 而 不 是 6。 枚 举 中 其 他 项 的 值 是 依次 递增 的 ， 
意味 着 Manager 的 值 为 4，Admin 的 值 为 5。 同 样 ， 我 们 也 可 以 单独 为 枚 举 中 的 每 一 项 指定 值 : 


enum Role [Employee = 3, Manager = 5, Admin = 7}; 
var role: Role - Role.Employee; 


还 可 以 从 枚 举 的 值 来 反 查 它 的 名 称 : 


enum Role {Employee, Manager, Admin}; 
console.log('Roles: ', Role[0], ',', Role[1], 'and', Role[2]); 
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2.4.6 任意 类 型 

















如 果 我 们 没有 为 变量 指定 类 型 ， 那 它 的 默认 类 型 就 是 any。 在 TypeScript 中 ，any 类 型 的 变量 
能 够 接收 任意 类 型 的 数据 : 














var something: any = 'as string'; 
something - 1; 


something - [1, 2, 3]; 


24.7 “无 ”类 型 


void 意 味 着 我 们 不 期 望 那 里 有 类 型 。 它 通常 用 作 吗 数 的 返回 值 ， 表 示 没 有 任何 返回 值 : 
function setName(name: string): void { 
this.name = name; 


} 




















2.5 类 




















JavaScript ES5 采 用 的 是 基于 原型 的 面向 对 象 设计 。 这 种 设计 模型 不 使 用 类 ,而 是 依赖 于 原型 。 


JavaScript 社 区 采纳 了 大 量 最 佳 实践 ， 以 弥补 JavaScript 缺 少 类 的 问题 。 这 些 最 佳 实践 已 经 被 
在 Mozilla 的 开发 指南 中 了 "， 你 还 可 以 找到 一 篇 关于 JavaScript 面 向 对 象 设计 的 优秀 概述 ? 
不 过 ， 在 ES6 中 ， 我 们 终于 有 内 置 的 类 了 。 


用 class 关 键 字 来 定义 一 个 类 ， 紧 随 其 后 的 是 类 名 和 类 的 代码 块 : 
class Vehicle { 


} 





P zi 


ASH 














类 可 以 包含 属性 、 方 法 以 及 构造 函数 。 


2.5.4 属性 





性 定义 了 类 实例 对 象 的 数据 。 比 如 名 叫 Person 的 类 可 能 有 first_name 、1ast_name 和 age 











类 中 的 每 个 属性 都 可 以 包含 一 个 可 选 的 类 型 。 比 如 , 我 们 可 以 把 first_name 和 1ast_name 声 
明 为 字符 串 类 型 ( string )， 把 age 声明 为 数字 类 型 (number )。 


Person 类 的 声明 是 这 样 的 : 























(D https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide 
(25 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction to Object-Oriented JavaScript 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 


2:5 


53 


»* 





class Person { 
first name: string; 
last name: string; 
age: number; 


} 


2.5.2 方法 


方法 是 运行 在 类 对 象 实例 上 下 文中 的 函数 。 在 调用 对 象 的 方法 之 前 ， 必 须要 有 这 个 对 象 的 


实例 。 


要 实例 化 一 个 类 ， 我 们 使 用 new 关 键 字 。 比 如 new Person( ) 会 创建 一 个 Person 


类 的 实例 对 象 。 


如 果 我 们 希望 问候 某 个 Person， 就 可 以 这 样 写 : 


class Person { 
first_name: string; 
last name: string; 
age: number; 





greet() ( 
console.log("Hello", this.first name); 
j 
j 
注意 ， 借 助 this 关 键 字 ， 我 们 能 用 this.first_name 表 达 式 来 访问 Person 类 








BTE 


TH 
Pam) 








的 first_name 


如 果 没 有 显 式 声明 过 方法 的 返回 类 型 和 返回 值 , 就 会 假定 它 可 能 返回 任何 东西 ( 即 any 类 型 )。 





然而 ， 因 为 这 里 没有 任何 显 式 的 return 语 句 ， 所 以 实际 返回 的 类 型 是 void。 





人 注意 ，void 类 型 也 是 一 种 合法 的 any 类 型 。 


调用 greet 方 法 之 前 ,我 们 要 有 一 个 Person 类 的 实例 对 象 。 代 码 如 下 : 


// declare a variable of type Person 
var p: Person; 


// instantiate a new Person instance 
p = new Person(); 


// give it a first name 
p.first name - 'Felipe'; 


// call the greet method 
p.greet(); 
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我 们 还 可 以 将 对 象 的 声明 和 实例 化 缩写 为 一 行 代 码 : 


var p: Person = new Person(); 





假设 我 们 希望 Person 类 有 一 个 带 返 回 值 的 方法 。 比 如 ， 要 获取 某 个 Person 在 数 年 后 的 年 龄 ， 
我 们 可 以 这 样 写 : 


class Person { 
first_name: string; 
last_name: string; 
age: number; 


greet() ( 
console.log("Hello", this.first name); 


} 


ageInYears(years: number): number { 
return this.age + years; 
j 
j 


// instantiate a new Person instance 
var p: Person - new Person(); 


// set initial age 
p.age = 6; 


// how old will he be in 12 years? 
p.ageInYears(12); 


// -> 18 


2.5.8. ”构造 函数 
构造 函数 是 当 类 进行 实例 化 时 执行 的 特殊 函数 。 通 常会 在 构造 函数 中 对 新 对 象 进行 初始 化 


工作 。 








构造 函数 必须 命名 为 constructor。 因 为 构造 函数 是 在 类 被 实例 化 时 调用 的 ， 所 以 它们 可 以 
有 输入 参数 ， 但 不 能 有 任何 返回 值 。 


o 我 们 要 通过 调用 new ClassName() 来 执行 构造 函数 ， 以 完成 类 的 实例 化 。 





当 类 没有 显 式 地 定义 构造 函数 时 ， 将 自动 创建 一 个 无 参 构造 函数 : 


class Vehicle { 


} 


var v = new Vehicle(); 
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o 





它 等 价 于 : 


class Vehicle { 
constructor() { 
j 

j 


var v - new Vehicle(); 


在 TypeScript 中 ， 每 个 类 只 能 有 一 个 构造 函数 。 


这 是 违背 


ES6 标 准 的 。 在 ES6 中 ， 


重 载 实 现 。 


一 个 类 可 以 拥有 不 同 参数 数量 的 多 个 构造 函数 


我 们 可 以 使 用 带 参数 的 构造 函数 来 将 对 象 的 创建 工作 参数 化 。 
比如 ,我 们 可 以 对 Person 类 使 用 构造 函数 来 初始 化 它 的 数据 : 


class Person 
first_name: 
last_name: 


{ 
string; 
string; 


age: number; 


constructor 
this.firs 


this.last. 


(first name: string, 
t name - first name; 
name - last name; 


this.age - age; 


j 


greet() ( 


console.log("Hello", 


j 


last name: string, age: number) ( 


this.first name); 


ageInYears(years: number): number { 


return th 
} 
} 


is.age + years; 


用 下 面 这 种 方法 重 写 前 面 的 例子 要 容易 些 : 


var p: Person = new Person('Felipe', 


p.greet(); 


'Coury', 36); 


当 创建 这 个 对 象 的 时 候 ， 其 姓名 、 年 龄 都 会 被 初始 化 。 


2.5.4 ”继承 


面向 对 象 的 男 一 个 重要 特性 就 是 继承 。 
就 可 以 在 这 个 子 类 中 重 写 、 修 改 以 及 添加 行为 。 


图 灵 社 区 会 员 





继承 表明 子 类 能 够 从 父 类 得 到 它 的 行为 。 然后, 我们 
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如 果 要 深入 了 解 ES5 的 继承 是 如 何 工作 的 ， 可 以 参考 Mozilla 开 发 文档 中 的 文章 
"Inheritance and the prototype chain" ". 








TypeScript 是 完全 支持 继承 特性 的 ， 并 不 像 ES5 那 样 要 靠 原 型 链 实现 。 继 承 是 TypeScript 的 核 
心 语法 ， 用 extends 关 键 字 实现 。 


要 说 明 这 一 点 ， 我 们 来 创建 一 个 Report 类 : 


class Report { 
data: Array«string»; 


constructor(data: Array«string») { 
this.data - data; 


} 
run() { 


this.data.forEach(function(line) { console.log(line); }); 
} 
} 


这 个 Report 类 有 一 个 字符 串 数 组 类 型 的 qata 的 属性 。 当 我 们 调用 run 方 法 时 ， 它 会 循环 这 个 
data 数 组 中 的 每 一 项 数据 ， 然 后 用 console. 1og 打 印 出 来 。 











O .forEach 是 Array 中 的 一 个 方法 ， 它 接收 一 个 函数 作为 参数 ， 并 对 数组 中 的 每 
一 个 条 目 逐 个 调用 该 函数 。 


给 Report 增 加 几 行 数据 ， 并 调用 run 把 这 些 数据 打印 到 控制 台 : 


var r: Report = new Report(['First line', 'Second line']); 
r.run(); 


运行 结果 如 下 : 


First line 
Second line 








现在 ， 假 设 我 们 希望 有 第 二 个 报表 ， 它 需要 增加 一 些 头 信息 和 数据 ， 但 我 们 仍 想 复 用 现 有 
Report 类 的 run 方 法 来 向 用 户 展示 数据 。 
为 了 复 用 Report 类 的 行为 ， 要 使 用 extends 关 键 字 来 继承 它 : 


class TabbedReport extends Report { 
headers: Array«string»; 














constructor(headers: string[], values: string[]) { 
super(values) 





(D https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance and the prototype chain 
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this.headers - headers; 


j 
run() 1 


console.log(this.headers); 
super.run(); 





j 
j 
var headers: string[] - ['Name']; 
var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship']; 
var r: TabbedReport - new TabbedReport(headers, data) 
r.run(); 


26 IR 


ES6 和 TypeScript 提 供 了 许多 语法 特性 ， 证 编码 成 为 一 种 享受 。 其 中 最 重要 的 两 点 是 : 
口 胖 箭 头 函 数 语 法 
a 模板 字符 串 








2.6.1 胖 箭 头 函 数 

ERS (=>) 函数 是 一 种 快速 书写 函数 的 简洁 语法 。 

在 ES5 中 ,每 当 我 们 要 用 函数 作为 方法 参数 时 ， 都 必须 用 function 关 键 字 和 紧 随 其 后 的 花 括 
号 ({} ) 表示 。 就 像 这 样 : 


// ES5-like example 
var data - ['Alice Green', 'Paul Pfifer', 'Louis Blakenship']; 
data.forEach(function(line) { console.log(line); }); 


现在 我 们 可 以 用 => 语 法 来 重 写 它 了 : 


// Typescript example 
var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship']; 
data.forEach( (line) -» console.log(line) ); 


当 只 有 一 个 参数 时 ， 圆 括号 可 以 省 略 。 箭 头 〈=， ) 语法 可 以 用 作 表 达 式 : 


var evens = [2,4,6,8]; 
var odds = evens.map(v -» v + 1); 


也 可 以 用 作 语 句 : 


data.forEach( line => { 
console.log(line.toUpperCase()) 


1); 
= 语法 还 有 一 个 重要 的 特性 ， 就 是 它 和 环绕 它 的 外 部 代码 共享 同一 个 this。 这 是 它 和 普通 
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function 写 法 最 重要 的 不 同 点 。 通 常 ， 我 们 用 function 声 明 的 函数 有 它 自 己 的 this 。 有 时 在 
JavaScript 中 能 看 见 如 下 代码 : 


var nate = { 
name: "Nate", 
guitars: ["Gibson", "Martin", "Taylor"], 
printGuitars: function() { 
var self - this; 
this.guitars.forEach(function(g) { 
// this.name is undefined so we have to use self.name 
console.log(self.name + " plays a " + g); 
D); 
j 
K 


由 于 胖 箭 头 会 共享 环绕 它 的 外 部 代码 的 this ， 我 们 可 以 这 样 改 写 : 


var nate = { 
name: "Nate", 
guitars: ["Gibson", "Martin", "Taylor"], 
printGuitars: function() { 
this.guitars.forEach( (g) => { 
console.log(this.name + " plays a " + g); 
y 
} 
}; 


可 见 ， 箭 头 函 数 是 处 理 内 联 函数 的 好 办 法 。 这 也 让 我 们 在 JavaScript 中 更 容易 使 用 高 阶 函 数 。 

















2.6.2 ”模板 字符 串 
ES6 引 入 了 新 的 模板 字符 串 语 法 ， 它 有 两 大 优势 : 
(1) 可 以 在 模板 字符 串 中 使 用 变量 ( 不必 被 迫使 用 + 来 拼接 字符 串 ); 
D 支持 多 行 字符 串 。 
1. 字符 串 中 的 变量 
这 种 特性 也 叫 字符 串 插值 (string interpolation )。 你 可 以 在 字符 串 中 插入 变量 ， 做 法 如 下 : 


var firstName = "Nate"; 
var lastName = "Murray"; 











// interpolate a string 
var greeting = ^Hello ${firstName} $[lastName]'; 


console.log(greeting); 


注意 ,字符 串 捅 值 必须 使 用 反 引 号 ， 不 能 用 单 引 号 或 双 引 号 。 
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2. 多 行 字符 串 
反 引 号 字符 串 的 另 一 个 优点 是 允许 多 行文 本 : 


var template = ^ 
«div» 

«hi»Hello«/h1» 

<p>This is a great website«/p» 
«/div» 





// do something with ^template^ 


当 我 们 要 插入 模板 这 样 的 长 文本 字符 串 时 ， 多 行 字 符 串 会 非常 有 帮助 。 








27 ”总结 


在 TypeScript 和 ES6 中 还 有 很 多 其 他 的 优秀 语法 特性 ， 如 : 
口 接口 

口 泛 型 
口 模块 的 导入 、 导 出 





口 标注 
口 解构 


我 们 会 在 本 书 的 后 续 章 节 中 讲 到 这 些 概念 并 使 用 它们 。 目 前, 本 章 的 这 些 基本 知识 已 经 足够 
你 开始 学 习 Angular 了 。 


言 归 正 传 ， 让 我 们 回 到 Angular 吧 ! 
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本 章 将 讨论 Angular 中 的 高 级 概念 ， 从 全 局 视角 来 分 析 各 细节 部 分 是 如 何 协同 工作 的 。 


如 果 你 用 过 AngularJS , 会 发 现 Angular 采 用 了 全 新 的 思维 模型 来 构建 应 用 。 别 担 
心 ， 作 为 AngularJS 的 使 用 者 , 我们 觉得 Angular 的 设计 既 简 明 又 熟悉 。 在 本 书 稍 
后 的 章节 中 ， 我 们 会 专门 讨论 如 何 将 AngularJS 应 用 转换 成 Angular 应 用 。 


在 后 面 的 章节 里 ,我 们 会 对 每 一 个 概念 进行 深入 讲解 ,但 目前 只 作 概 述 并 解释 最 基础 的 概念 。 


第 一 个 重要 概念 : Angular 应 用 是 由 组 件 构 成 的 。 可 以 将 组 件 理解 为 一 种 教 浏览 器 认识 新 
HTML 标 签 的 方式 。 如 果 你 有 使 用 AngularJS 的 经 验 ， 那么 可 以 把 组 件 理解 为 类 似 于 指令 的 概念 。 
(事实 上 ，Angular 中 也 有 指令 ， 我 们 会 在 后 面 讨论 具体 的 差异 。) 


其 实 ， 相 比 AngularJS 中 的 指令 ，Angular 中 的 组 件 有 一 些 重 要 优势 ,我 们 会 详细 讨论 。 现 在 ， 
让 我 们 先 来 看 看 最 顶级 的 概念 : 应 用 。 














3.4 应 用 


一 个 Angular 应 用 其 实 就 是 一 棵 由 组 件 构成 的 树 。 

在 这 棵 树 的 根 结 点 ， 最 顶层 的 组 件 就 是 应 用 本 身 。 它 会 在 浏览 器 启动 (也 叫 引导 ) 应 用 的 时 
候 被 泻 染 。 

组 件 有 一 个 很 棒 的 特性 , 那 就 是 它们 是 可 组 合 的 。 这 意味 着 我 们 可 以 基于 小 组 件 构建 大 组 件 。 
应 用 只 是 一 个 会 浑 染 其 他 组 件 的 组 件 而 已 。 


由 于 组 件 是 以 树 型 结构 组 织 起 来 的 ， 当 每 个 组 件 被 泻 染 时 ， 它 都 会 递归 地 泻 染 下 级 组 件 。 
举 个 例子 ， 让 我 们 基于 如 图 3-1 所 示 的 原型 图 创建 一 个 简单 的 库存 管理 系统 。 

拿 到 这 个 原型 图 后 ， 我 们 应 该 做 的 第 一 件 事 就 是 把 页 面 拆 分 成 组 件 。 

在 这 个 例子 里 ， 我 们 可 以 对 页 面 内 容 进 行 分 组 ， 并 抽象 成 三 个 高 层级 组 件 : 
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(1) 主导 航 组 件 
(2) 面包 居 导 航 组 件 
(3) 产品 列表 组 件 





SKU# 104544-2 $109.99 
Nykee Running Shoes 


Men > Shoes > Running Shoes 


SKU# 187611-0 $238.99 
South Face Jacket 
Women > Apparel > Jackets & Vests 


SKU# 443102-9 $238.99 
Adeeds Active Hat 
Men > Accessories > Hats 





图 3-1 库存 管理 系统 


3.1.1 主导 航 组 件 


这 个 组 件 用 来 展示 主导 航 部 分 ， 用 户 可 以 通过 主导 航 组 件 访问 应 用 的 其 他 部 分 (如 图 3-2 所 
Zh Jo 





NEED" EN (100 — (COE NNNM 





图 3-2 主导 航 组 件 





3.1.2 面包 届 导 航 组 件 
这 个 组 件 用 来 展示 用 户 在 本 应 用 “网 站 地 图 ”中 的 当前 位 置 ( 如 图 3-3 所 示 )。 
Products y Products List 


图 3-3 ”面包 习 导 航 组 件 
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3.4.8 ”产品 列表 组 件 
产品 列表 组 件 用 来 展示 一 组 产品 ( 如 图 3-4 所 示 )。 


N A| SKU# 104544-2 
Image Nykee Running Shoes 
Z NI Men > Shoes > Running Shoes 


~N pL SKU# 187611-0 
Image South Face Jacket 





Z NI Women > Apparel > Jackets & Vests 


N A| SKU# 443102-9 
Image Adeeds Active Hat 
Z N Men > Accessories > Hats 





图 3-4 产品 列表 组 件 
我 们 还 可 以 继续 拆 分 产品 列表 组 件 ， 从 而 得 到 下 一 级 的 产品 条 目 组 件 ( 如 图 3-5 所 示 )。 


NC pd SKU# 104544-2 $109.99 
Image Nykee Running Shoes 
Pd N Men » Shoes » Running Shoes 
图 3-5 产品 条 目 组 件 


当然 ， 我 们 可 以 再 进一步 ， 把 每 个 产品 条 目 组 件 拆 分 为 更 小 的 组 件 。 


a 产品 图 片 组 件 用 来 根据 指定 的 图 片 名 称 显 示 产 品 图 片 。 

口 产品 分 类 组 件 用 来 展示 产品 分 类 树 。 比 如 : 男装 > 鞋 > 跑鞋 。 

口 价格 显示 组 件 用 来 展示 产品 价格 。 如 果 我 们 对 产品 价格 有 定制 化 需求 ， 比 如 用 户 登 录 后 
可 以 获得 全 局 折扣 或 者 包 邮 ， 就 可 以 在 这 个 组 件 中 实现 。 


最 后 ， 把 以 上 组 件 按 层级 结构 进行 整理 ， 就 得 到 了 如 图 3-6 所 示 的 树 状 图 。 
在 树 状 图 的 顶层 可 以 看 到 我 们 的 应 用 : 库存 管理 系统 。 

往 下 细 分 为 主导 航 、 面 包 导 导 航 和 产品 列表 组 件 。 

产品 列表 组 件 包 含 一 些 产 品 条 目 组 件 ， 每 个 产品 各 一 个 。 


产品 条 目 组 件 又 包含 三 个 更 下 层 的 组 件 : 一 个 用 于 展示 图 片 , 一 个 用 于 展示 分 类 , 一 个 用 于 
展示 价格 。 


现在 ， 让 我 们 一 起 来 实现 这 个 应 用 。 





















































你 可 以 在 本 书 下 载 内 容 的 how_angular works/inventory app 目 录 中 找到 本 章 涉 及 
的 全 部 代码 。 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


3.1 应 用 


63 








当 我 们 的 应 用 完成 之 后 ， 它 看 起 来 应 该 如 图 3-7 所 示 。 


G C / P ng-book2: inventory App x 





库存 管理 系统 


产品 列表 





图 3-6 ”应 用 树 状 图 


面包 履 导 航 


价格 显示 














€ SC [)localhost:8080 





i ng-book2 Angular 2 Inventory App 





Black Running Shoes 
SKU ffMYSHOES 


Men » Shoes » Running Shoes 


Blue Jacket 
SKU ffNEATOJACKET 
Women > Apparel > Jackets & Vests 


A Nice Black Hat 
SKU ffNICEHAT 


Men > Accessories > Hats 


$109.99 


$238.99 


$29.99 








K3-7 “完成 的 库存 管理 
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3.2 ”产品 数据 模型 
关于 Angular， 有 一 件 事 你 必须 清楚 : 它 不 要 求 使 用 指定 的 数据 模型 库 。 


Angular 十 分 灵活 ， 可 以 支持 多 种 不 同 的 数据 模型 ( 和 数据 架构 )。 不 过 这 也 意味 着 你 需要 决 
定 自 己 的 实现 方式 。 


关于 数据 结构 ， 我 们 会 在 第 9 章 详细 讲 解 。 在 本 章 中 ,我 们 仅 使 用 普通 的 JavaScript 对 象 作为 
数据 模型 。 


code/how angular works/inventory app/app.ts 


























/** 
x Provides a “Product object 
*/ 
class Product { 
constructor( 
public sku: string, 
public name: string, 
public imageUrl: string, 
public department: string[], 
public price: number) { 
j 
j 


如 果 你 还 不 熟悉 ES6/TypeScript， 可 能 会 对 这 段 代 码 的 语法 感到 陌生 。 
上 面 的 代码 创建 了 一 个 名 叫 Product 的 类 ， 这 个 类 的 构造 函数 接收 5 个 参数 。public sku: 
string 这 行 代 码 有 两 个 意思 ; 


口 这 个 类 的 实例 有 一 个 名 为 sku 的 公共 属性 ; 
口 sku 的 类 型 是 string。 


























如 果 你 已 经 比较 熟悉 JavaScript, 可 以 通过 learnxinyminutes" 上 的 教程 来 快速 补充 
相关 知识 ， 比 如 上 面 代码 中 的 public constructor 简写 形式 。 


上 面 代 码 中 的 Product 类 不 依赖 Angular 中 的 任何 东西 , 它 只 是 一 个 我 们 会 在 应 用 中 用 到 的 数 
据 模 型 。 





3.3 组 件 


前 面 提 到 过 ， 组 件 是 构成 Angular 应 用 的 基本 组 成 部 分 。 "应 用 ”本 刁 就 是 一 个 顶层 组 件 ， 并 
且 我 们 把 应 用 划分 成 了 细 粒 度 的 组 件 。 











(D https://learnxinyminutes.com/docs/typescript/ 
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Qs 技巧 : 当 开发 新 的 Angular 应 用 时 ， 先 画 出 原型 图 ， 然 后 拆 分 成 组 件 。 


为 我 们 经 常用 到 组 件 ， 所 以 有 必要 对 组 件 进 行进 一 步 研究 。 


每 个 组 件 都 由 三 个 部 分 组 成 : a 
a 组 件 注解 
口 视图 
口 控制 器 

要 清楚 这 些 关键 概念 ， 就 要 充分 理解 组 件 。 我 们 先 来 分 析 顶 层 的 库存 管理 系统 应 用 ， 然 后 再 
来 分 析 产 品 列表 及 其 下 级 组 件 (如 图 3-8 所 示 )。 














库存 管理 系统 











图 3-8 ”产品 列表 组 件 
一 个 基本 的 顶层 应 用 InventoryApp (库存 管理 系统 ) 看 起 来 是 这 样 的 : 


GComponent( ( 
selector: 'inventory-app', 
template: ^ 
«div classz"inventory-app"» 
(Products will go here soon) 
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«/div» 


}) 
class InventoryApp { 
// Inventory logic here 


} 

// module boot here... 

如 果 你 用 过 AngularJSs， 可 能 会 觉得 完全 看 不 懂 这 段 代 码 。 别 担心 ， 其 实 两 者 的 思路 还 是 很 
相似 的 ， 让 我 们 来 一 步 一 步 地 分 析 。 


这 段 代 码 中 的 ecomponent 被 称 作 注解 。 它 给 紧 随 其 后 的 类 (InventoryApp ) 添加 了 一 些 元 
数据 。 


GComponent 注解 明确 了 下 面 两 项 : 


O selector (选择 器 ) 用 来 告诉 Angular 要 匹配 哪个 HTML 元素; 
口 template (模板 ) 用 来 定义 视图 。 


组 件 的 控制 器 是 由 一 个 TypeScript 类 定义 的 ， 比如 前 面 代 码 中 的 InventoryApp 类 。 
接 下 来 让 我 们 对 代码 中 的 各 个 部 分 进行 更 详细 的 分 析 。 
































3.4 组 件 注 解 
@Component 注 解 是 对 组 件 进行 配置 的 地 方 。 一 般 来 说 ，@Component 会 配置 你 的 组 件 如 何 与 
外 界 交互 。 


要 配置 一 个 组 件 ， 有 很 多 种 方法 ( 我 们 会 在 第 14 章 中 进行 讲解 )。 本 章 只 会 涉及 一 些 基本 
配置 。 





3.4.1 ”组件 selector 


通过 selector (Ytffga ) 配置 项 ， 可 以 指定 当 HTML 模板 被 泻 染 时 Angular 如 何 找到 组 件 。 
个 思路 与 CSS、XPath 中 的 选择 咒 很 像 。 我 们 可 以 用 选择 器 来 定义 HTML 中 的 哪些 元 素 用 来 与 组 

件 匹 配 。 在 前 面 的 例子 中 ，selector: inventory-app 就 表示 我 们 希望 在 HTML 中 匹配 
inventory-app 标 签 。 也 就 是 说 ， 我 们 定义 了 一 个 新 的 HTML 标 签 ， 每 当 我 们 使 用 这 个 标签 时 ， 
它 都 拥有 我 们 定义 的 功能 。 例 如 ， 我 们 把 下 面 这 段 代 码 放 到 HTML 中 : 

«inventory-app»«/inventory-app» 

Angular 就 会 自动 使 用 我 们 定义 的 InventoryApp 组 件 来 实现 这 个 标签 的 功能 。 

此 外 ， 这 个 例子 中 定义 的 选择 器 还 可 以 匹配 一 个 以 组 件 名 为 属性 的 普通 div 元 素 : 


«div inventory-app»«/div» 
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3.4.2 组件 template 


视图 是 一 个 组 件 中 可 视 的 部 分 。 我 们 可 以 用 ecomponent 中 的 template 配 置 项 来 定义 组 件 所 
用 的 HTML 模板: 


GComponent( { 


Selector: 'inventory-app', 
template: ^ 


«div classz"inventory-app"'» 
(Products will go here soon) 
«/div» 











}) 


可 以 看 到 ， 在 template 配 置 项 里 ,我 们 用 到 了 TypeScript 中 用 反 引 号 包 庄 的 多 行文 本 语法 。 
到 目前 为 止 ， 我 们 的 模板 还 都 很 简单 : 只 有 一 个 div 和 一 些 占 位 文本 。 


如 果 和 希望 把 模板 放 到 一 个 单独 的 文件 中 ， 可 以 将 组 件 的 template 配 置 项 改 为 
templateUr1 配 置 项 ， 把 配置 的 内 容 设 置 为 模板 文件 名 即 可 。 


3.4.8 添加 产品 


我 们 的 应 用 现在 还 没有 产品 可 展示 ， 需 要 添加 一 些 。 
可 以 用 如 下 代码 创建 一 个 Product : 


let newProduct = new Product( 








'NICEHAT', // sku 

'A Nice Black Hat', // name 
'/resources/images/products/black-hat.jpg', // imageUrl 
['Men', 'Accessories', 'Hats'], // department 
29.99); // price 


Product 类 的 构造 函数 接收 5 个 参数 。 新 建 一 个 Product 实 例 要 用 到 new 关 键 词 。 


e 一 般 情 况 下 ， 我 们 应 该 不 会 向 一 个 函数 传递 超过 5 个 参数 。 另 一 种 做 法 是 将 
Product 类 的 构造 函数 修改 为 接收 一 个 配置 对 象 , 这样 就 可 以 不 必 记 住 参 数 的 顺 
序 了 。 如 果 这 样 做 ， 我 们 就 可 以 像 这 样 编写 Product 类 的 代码 : 


new Product({sku: "MYHAT", name: "A green hat"]) 


但 就 目前 来 说 ，5 个 参数 的 构造 函数 还 可 以 接受 。 











我 们 希望 在 界面 中 展示 这 个 Product 。 为 了 让 产品 属性 在 模板 中 可 访问 ， 我 们 把 它们 添加 到 
组 件 的 实例 变量 中 。 
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比如 ， 如 果 和 希望 在 视图 中 访问 新 产品 newProduct ， 可 以 这 样 写 


class InventoryApp { 
product: Product; 


constructor() { 
let newProduct = new Product( 
'NICEHAT', 
'A Nice Black Hat', 
'/resources/images/products/black-hat.jpg', 
['Men', 'Accessories', 'Hats'], 
29.99); 


this.product - newProduct; 


} 
} 


也 可 以 更 简洁 一 点 : 


class InventoryApp { 
product: Product; 


constructor() { 
this.product = new Product( 
'NICEHAT', 
'A Nice Black Hat', 
'/resources/images/products/black-hat.jpg', 
['Men', 'Accessories', 'Hats'], 
29.99); 


i 


， 我 们 在 这 里 做 了 三 件 寻 
(1) 添加 了 一 个 constructor 。 当 Angular 创 建 这 个 组 件 的 实例 时 ， 会 调用 这 个 constructor。 
我 们 可 以 在 这 里 对 这 个 组 件 进 行 初始 化 。 
(2) 声明 了 一 个 实例 变量 。 当 我 们 在 InventoryApp 里 写 product : Product 的 时 候 ， 是 在 
InventoryApp 的 实例 中 定义 了 一 个 名 叫 product 的 属性 ， 用 于 保存 Product 对 象 。 
(3) 给 product 属 性 赋值 了 一 个 Product 实例 。 在 constructor 中 ， 我们 创建 了 一 个 Product 
的 实例 ， 并 把 它 赋值 给 product 实 例 变量 。 





o 























3.4.4 用 模板 绑 定 来 查看 产品 


由 于 已 经 给 prodquct 赋 了 值 ， 现 在 我 们 可 以 在 视图 中 使 用 这 个 变量 了 。 把 模板 修改 成 下 面 
这 样 : 
GComponent ( { 
selector: 'inventory-app', 
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template: ^ 

«div classz"inventory-app"'» 
«hi»(( product.name j)«/h1» 
«span» {{ product.sku ))«/span» 

«/div» 


}) 


{{...}} 语 法 被 称 为 模板 绑 定 。 它 告诉 视图 ， 我们 希望 在 模板 的 这 个 位 置 使 用 花 括 号 中 表达 SE 
式 的 值 。 


在 这 个 例子 中 ， 我 们 有 两 个 绑 定 : 


口 {{ product.name }} 
口 {{ product.sku }} 














product 变 量 来 自 于 InventoryApp 组 件 实例 中 的 实例 变量 product 。 

模板 绑 定 有 个 很 灵活 的 特性 : 花 括 号 中 的 内 容 是 一 个 表达 式 。 这 意味 着 你 可 以 像 下 面 这 样 写 
代码 : 
O {{ count + 1 }} 
OD (( myFunction(myArguments) }} 


在 第 一 个 示例 中 ， 我 们 使 用 一 个 操作 符 改 变 了 count 的 显示 值 。 在 第 二 个 示例 中 ， 我 们 使 用 
myFunction(myArguments ) 函数 的 返回 值 来 作为 显示 内 容 。 使 用 模板 绑 定 标签 是 在 Angular 应 用 
中 展示 数据 的 主要 方式 。 























FEE 

















3.4.5 添加 更 多 产品 
我 们 当然 不 希望 应 用 只 展示 一 个 产品 ; 实际 上 ， 我 们 希望 展示 一 个 完整 的 产品 列表 。 因 此 ， 
把 InventoryApp 中 的 一 个 Product 属 性 修改 为 Product 数 组 : 


class InventoryApp [f 
products: Product[]; 














constructor() { 
this.products - []; 
} 
} 
注意 ， 我 们 还 把 product 变 量 重 命 名 为 products ， 并 且 把 类 型 改 为 了 Product [] 。 后 面 的 [] 
代表 我 们 希望 products 是 一 个 Product 数 组 。 也 可 以 把 它 写 成 Array<Product>、。 


现在 InventoryApp 已 经 可 以 保存 多 个 Product 了 ， 我 们 在 构造 函数 中 多 创建 一 些 Product。 

















code/how angular works/inventory app/app.ts 


class InventoryApp [f 
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products: Product[]; 


constructor() { 
this.products - [ 
new Product( 
'MYSHOES', 
'Black Running Shoes', 
'/resources/images/products/black-shoes.jpg', 
['Men', 'Shoes', 'Running Shoes'], 
109.99), 
new Product( 
'NEATOJACKET', 
'Blue Jacket', 
'/resources/images/products/blue- jacket. jpg', 
['Women', 'Apparel', 'Jackets & Vests'], 
238.99), 
new Product( 
'NICEHAT', 
'A Nice Black Hat', 
'/resources/images/products/black-hat.jpg', 
['Men', 'Accessories', 'Hats'], 
29.99) 
]; 
j 


这 段 代 码 会 在 应 用 中 创建 一 些 产品 以 备 后 续 使 用 。 


3.4.0 ”选择 一 个 产品 





我 们 需要 应 用 支持 用 户 交 互 。 比 如 ， 用 户 可 能 会 希望 选择 一 个 特定 的 产品 来 查看 更 多 信息 ， 
或 者 把 它 加 入 购物 车 ， 等 等 。 


下 面 来 给 InventoryApp 定 义 一 个 新 方法 productWasSelected, 用 来 响应 用 户 对 产品 的 选择 























F 
o 


code/how angular works/inventory app/app.ts 


productWasSelected(product: Product): void { 
console.log('Product clicked: ', product); 


} 


3.4.7 用 cproducts-list> 列 出 产品 





顶层 的 InventoryApp 组 件 已 经 有 了 , 现在 需要 创建 一 个 新 的 组 件 用 来 泻 染 产品 列表 。 接 下 
来 ,我 们 会 实现 使 用 products-1ist 选 择 器 的 ProductsList 组 件 。 在 我 们 深入 实现 细节 之 前 ， 先 
看 看 如 何 使 用 它 。 








code/how angular works/inventory app/app.ts 


GComponent( f 
selector: 'inventory-app', 
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template: ^ 
«div classz"inventory-app"'"» 
«products-list 
[productList]-"products" 
(onProductSelected)-"productWasSelected($event)"» 
«/products-list» 
«/div» 





D) 


class InventoryApp { 
这 里 出 现 了 一 些 新 的 语法 和 配置 项 ， 我 们 来 逐一 说 明 。 
1. 输入 /输出 
使 用 products-list 组 件 时 ， 我 们 会 用 到 Angular 组 件 的 一 个 核心 特性 : 输入 /输出 。 
«products-list 
[productList]-"products" «1— input —-» 


(onProductSelected)-"productWasSelected($event)"» «!-- output -—» 
«/products-list» 


方 括号 [] 用 来 传递 和 输入 ， 圆 括号 ( ) 用 来 处 理 输出 。 

数据 通过 输入 绑 定 流入 你 的 组 件 ， 事件 通过 输出 绑 定 流出 你 的 组 件 。 
可 以 将 输入 与 输出 绑 定 理解 为 对 组 件 定 义 了 一 组 公有 API。 

2. 方 括号 传递 输入 

在 Angular 中 ， 你 可 以 通过 和 输入 把 数据 传人 组 件 。 

在 我 们 的 代码 中 有 一 段 : 


«products-list 
[productList]-"products" 


这 就 是 在 使 用 ProductsList 组 件 的 输入 。 
可 能 products 和 productList 有 点 难以 理解 。 这 个 元 素 属性 Cattribute) 分 为 两 个 部 分 : 


O [productList] (= 号 左边 ) 
O "products" (= 号 右边 ) 


左边 的 [productList] 是 指 ， 我 们 希望 在 product-1ist 组 件 中 设置 名 为 productList 的 输 










































































Xu 

















右边 的 "products" 是 指 ， 我 们 希望 将 输入 设置 为 products 表 达 式 的 值 ， 即 InventoryApp 类 
中 的 this. products。 
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e 你 可 能 会 问 :“ 我 怎么 知道 productList 是 product-list 组 件 的 一 个 合法 输入 
Je? ”答案 是 : 需要 阅读 这 个 组 件 的 相关 文档 。inputs (输入 ) 和 outputs ( 输 

出 ) 是 这 个 组 件 “ 公 开 API” 的 一 部 份 。 
你 可 以 像 弄 清 一 个 函数 有 哪些 参数 一 样 来 弄 清 一 个 组 件 支持 哪些 输入 。 

3. 圆 括 号 处 理 输出 

在 Angular 中 ， 使 用 输出 来 将 数据 传递 出 组 件 。 

在 我 们 的 代码 中 有 一 段 : 

«products-list 


(onProductSelected)-"productWasSelected($event)"» 














意思 是 我 们 要 监听 ProductsList 组 件 的 onProductSelected 输 出 。 
岂 就 是 说 : 
口 (onProductSelected) ， 即 = 号 左边 是 我 们 要 监听 的 输出 的 名 称 ; 


O "productWasSelected", ， 即 = 号 右边 是 当 有 新 的 输入 时 我 们 想 要 调用 的 方法 ; 
O $event 在 这 里 是 一 个 特殊 的 变量 ， 用 来 表示 输出 的 内 容 。 


到 目前 为 止 , 我 们 还 没有 讨论 过 如 何在 组 件 中 定义 输入 和 输出 。 别 急 ,我 们 很 快 就 会 在 定义 
ProductsList 组 件 时 提 到 这 一 点 。 


4. 完整 的 InventoryApp 代 码 清单 


下 面 是 InventoryApp 组 件 的 完整 代码 清单 。 



































code/how angular works/inventory app/app.ts 


GComponent ( f 
selector: 'inventory-app', 
template: ^ 
«div class-z"inventory-app"» 
«products-list 
[productList]-"products" 
(onProductSelected)-"productWasSelected($event)"» 
«/products-list» 
«/div» 


}) 
class InventoryApp { 
products: Product[]; 


constructor() { 
this.products = [ 

new Product( 

'MYSHOES', 
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'Black Running Shoes', 
'/resources/images/products/black-shoes. jpg', 
['Men', 'Shoes', 'Running Shoes'], 
109.99), 

new Product( 
'NEATOJACKET', 
'Blue Jacket', 
'/resources/images/products/blue-jacket.jpg', 
['Women', 'Apparel', 'Jackets & Vests'], 
238.99), 

new Product( 
'NICEHAT', 
'A Nice Black Hat', 
'/resources/images/products/black-hat. jpg', 
['Men', 'Accessories', 'Hats'], 
29.99) 

]; 
} 


productWasSelected(product: Product): void { 
console.log('Product clicked: ', product); 
j 
j 


3.5 ”产品 列表 组 件 


我 们 已 经 有 了 顶层 应 用 组 件 ， 现 在 是 时 候 编 写 用 来 展示 产品 列表 的 ProductsList 组 件 了 。 
我 们 希望 只 允许 用 户 选 中 一 个 Product ， 还 希望 可 以 知道 哪个 Product 是 用 户 当 前 选中 的 。 
ProductList 组 件 是 做 这 件 事 的 绝 佳 场 所 ， 因 为 它 同 时 “知道 ”所 有 的 Product 。 
让 我 们 分 三 步 把 ProductsList 组 件 写 完 : 
D 设置 ProductsList 的 @Component 配 置 项 ; 
口 编写 ProductsList 的 控制 器 类 ; 
O 编写 ProductList 的 视图 模板 。 
































3.5.1 设置 ProductsList BJeComponent 配置 项 


我 们 来 看 看 ProductsList 的 @Component 配 置 。 





code/how angular works/inventory app/app.ts 


/** 
* @ProductsList: A component for rendering all ProductRows and 
* Storing the currently selected Product 
*/ 
@Component( { 
selector: 'products-list', 
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inputs: ['productList'], 
outputs: ['onProductSelected'], 
template: ^ 


在 ProductsList 组 件 代 码 中 ， 最 开始 是 我 们 熟悉 的 selector 选 择 器 配置 项 。 这 个 选择 器 表 
示 我 们 可 以 通过 在 代码 中 放置 cproducts-listy> 标 签 来 使 用 ProductsList 组 件 。 


代码 中 还 有 两 处 inputs 和 outputs 配 置 项 。 

















3.5.2 组件 的 输入 
我 们 可 以 用 inputs 配 置 项 来 指定 组 件 希 望 接收 哪些 参数 。inputs 接 收 一 个 字符 串 数组 ， 用 
来 指定 输入 的 键 (名 称 )。 


当 我 们 为 组 件 指定 了 一 个 输入 时 , 这 个 组 件 的 定义 类 就 一 定 要 有 一 个 实例 属性 来 接收 这 个 输 
入 的 值 。 例 如 ， 假 设 我 们 有 以 下 代码 : 





GComponent( { 
selector: 'my-component', 
inputs: ['name', 'age'] 


I» 

class MyComponent { 
name: string; 
age: number; 


} 
name 和 age 输入 分 别 对 应 于 Mycomponent 类 的 实例 中 的 name 和 age 属性 。 


指定 组 件 接收 一 个 输入 参数 的 另 一 种 方式 是 使 用 eInput 注 解 。 你 可 以 先导 和 人 Input ， 然 后 把 
@Input( ) 添 加 到 属性 声明 上 ， 代 码 如 下 : 


@Component( { 
selector: 'my-component' 

}) 

class MyComponent { 
@Input() name: string; 
@Input() age: number; 

j 


如 果 我 们 要 让 该 输入 属性 的 内 外 名 字 不 一 样 ， 可 以 这 样 写 : eInput('firstname') name: 
String; 。 但 是 “Angular 风 格 指南 ” "建议 避免 这 种 方式 。 
































你 可 以 任意 选择 这 两 种 方式 之 一 来 提供 输入 属性 ， 它 们 的 效果 是 一 样 的 。 在 本 
章 中 ， 我 们 将 使 用 inputs: [] 风 格 ， 而 其 他 章节 中 则 使 用 aeInput() 风 格 。 





(D https://angular.io/docs/ts/latest/guide/style-guide.html 
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如 果 想 使 用 其 他 模板 中 的 MyComponent ， 就 可 以 这 样 写 : 

«my-component [name]="myName" [age]="myAge"></my-component> , 

注意 , name 属 性 对 应 name 输 入 ， 也 恰好 与 MyComponent 中 的 name 属 性 对 应 。 不 过 这 些 名 称 并 
不 一 定 要 保持 一 致 。 

比如 ， 假 如 我 们 希望 标 和 元 素 的 属性 和 组 件 实例 中 的 属性 使 用 不 同 的 名 称 。 也 就 是 说 , Gun ENG 
我 们 希望 这 个 组 件 看 起 来 像 这 样 : 

«my-component [shortName]-"myName" [oldAge]-"myAge"»«/my-component» 


那么 可 以 这 样 修改 inputs 配 置 项 的 字符 串 格式 : 














du 























GComponent( { 
selector: 'my-component', 
inputs: ['name: shortName', 'age: oldAge'] 


I» 

class MyComponent { 
name: string; 
age: number; 


} 


一 般 而 言 ，inputs 输 入 字符 串 列 表 可 以 使 用 'componentProperty: exposedProperty' 
( ' 组 件 实例 属性 : 标签 元 素 属性 ' ) 的 格式 。 


例如 ， 我 们 可 以 像 这 样 写 一 个 组 件 : 


GComponent( { 
T4 
inputs: ['name', 'age', 'enabled'] 
AR 
I» 
class MyComponent { 
name: string; 
age: number; 
enabled: boolean; 


} 


然而 ， 如 果 我 们 希望 组 件 实例 属性 enabled 在 组 件 标签 中 对 应 的 标签 元 素 属性 名 称 为 
isEnabled ， 就 可 以 使 用 上 面 提 到 的 这 个 语法 : 


@Component({ 
ZA 
inputs: [ 
'name: name', 
'age: age', 
'isEnabled: enabled' 
] 
Jf 
}) 


class MyComponent { 
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name: string; 
age: number; 
isEnabled: boolean; 


} 
进一步 说 ， 由 于 只 有 一 个 属性 需要 明确 指定 从 enabled 映 射 到 isEnabled， 我 们 可 以 继续 简化 : 














@Component({ 
a 
inputs: ['name', 
demus 

}) 


class MyComponent { 
name: string; 
age: number; 
isEnabled: boolean; 


} 
在 inputs 输 入 数组 中 ， 当 字符 串 的 值 是 key: value (4: 值 ) 格式 的 时 候 ， 含义 如 下 : 


口 键 (name, 、age 和 isEnabled ) 表示 要 输入 的 属性 在 控制 器 看 来 如 何 ( 被 绑 定 ) ; 
O 值 (name, 、age 和 enabled ) 表示 属性 在 外 界 看 来 如 何 。 


'age', 'isEnabled: enabled'] 

















通过 inputs 配 置 项 传递 products 
你 应 该 还 记得 ， 在 InventoryApp 中， 我 们 通过 [productList] 输 入 将 products 传 到 了 


products-list 组 件 中 。 





code/how angular works/inventory app/app.ts 


/** 
* @InventoryApp: the top-level component for our application 
*/ 
@Component( { 
selector: 'inventory-app', 
template: ^ 


«div class-z"inventory-app"» 
«products-list 
[productList]-"products" 
(onProductSelected)-"productWasSelected($event)"» 
«/products-list» 
«/div» 


}) 


class InventoryApp { 
products: Product[]; 


constructor() { 
this.products - [ 


希望 你 现在 理解 了 : 在 上 面 的 代码 中 ,我 们 是 通过 ProductsList 组 件 类 的 一 个 输入 参数 将 


this.products 传 进去 的 。 
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3.5.8 组 件 的 输出 


如 果 要 从 组 件 中 把 数据 传递 出 去 ， 应 该 使 用 输出 绑 定 。 
假如 我 们 要 编写 有 一 个 按钮 的 组 件 ， 并 且 和 希望 在 这 个 按钮 被 点 击 的 时 候 做 点 什么 。 
想 实 现 这 一 点 ， 只 要 把 组 件 控制 器 中 的 一 个 方法 绑 定 到 按钮 的 点 击 输出 就 可 以 了 。 写 法 是 


(output )="action'" 。 
下 面 是 一 个 计数 需 的 例子 ， 点 击 按钮 的 时 候 可 以 对 计数 需 进 行 增加 或 减少 的 操作 。 


GComponent ( f 
selector: 'counter', 
template: ^ 
{{ value 1] 
«button (click)z"increase()"»Increase«/button» 
«button (click)-"decrease()"»Decrease«/button» 




















I» 
class Counter { 
value: number; 


constructor() ( 
this.value - 1; 


j 


increase() { 
this.value = this.value + 1; 
return false; 


j 


decrease() { 
this.value - this.value - 1; 
return false; 
j 
j 
在 这 个 例子 中 ， 我 们 希望 每 次 点 击 第 一 个 按钮 的 时 候 ， 调 用 控制 器 中 的 increase( ) 方 法 。 
同样 ， 每 次 点 击 第 二 个 按钮 的 时 候 ， 我 们 希望 调用 decrease( ) 方 法 。 


圆 括号 属性 的 语法 是 这 样 的 : (output)="action"。 这 个 例子 中 , 我 们 是 在 监听 按钮 的 click 
事件 。 还 有 很 多 内 置 的 事件 可 以 监听 ， 如 mousedown 、mousemove 、db1l-click 等 。 


这 个 例子 中 ， 事 件 是 组 件 内 置 的 。 当 我 们 编写 自己 的 组 件 时 ， 可 以 暴露 “公开 事件 ”( 组 件 
的 outputs ) 来 和 组 件 外 部 通信 。 


这 里 要 理解 的 关键 是 ， 在 视图 中 ， 我 们 可 以 使 用 (output )="action" 语 法 来 监听 事件 。 
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3.5.4 触发 自 定 义 事件 

上 面 例子 中 的 cl ick 和 mousedown 等 是 按钮 内 置 的 事件 ， 现 在 我 们 要 来 创建 一 个 可 以 触发 自 
定义 事件 的 组 件 。 自 定义 输出 ， 我 们 需要 做 三 件 事 : 

(1) 在 @Component 配 置 中 ， 指 定 outputs 配 置 项 ; 

(2) 在 实例 属性 中 ,设置 一 个 EventEmitter (事件 触发 器 ); 

(3) 在 适当 的 时 候 ， 通 过 EventEmitter 触 发 事件 。 




















可 能 你 对 EventEmitter 还 不 大 熟悉 ， 不 过 别 担 心 ， 它 并 不 难 。 
EventEmitter 只 是 一 个 帮 你 实现 观察 者 模式 "的 对 象 。 也 就 是 说 ， 它 是 一 个 管 
理 一 系列 订阅 者 并 向 其 发 布 事件 的 对 象 。 就 是 这 么 简单 。 

来 看 一 个 使 用 EventEmitter 的 简单 小 例子 : 


let ee = new EventEmitter(); 
ee.subscribe((name: string) => console.log(^Hello $í[name]^)); 
ee.emit("Nate"); 


// -> "Hello Nate" 

当 我 们 把 一 个 EventEmitter 赋 值 给 一 个 输出 的 时 候 ， Angular 会 自动 帮 有 我们 订 
阅 事件 。 我 们 不 需要 自己 订阅 。( 当然 ， 如 果 需 要 ， 你 仍然 可 以 实现 自己 的 订阅 
3E BEL) 





下 面 是 一 段 具 有 outputs 的 组 件 示 例 代 码 : 


@Component( { 
selector: 'single-component', 
outputs: ['putRingOnIt'], 
template: ^ 
«button (click)-"liked()"»Like it?«/button» 


}) 
class SingleComponent { 
putRingOnIt: EventEmitter«string»; 


constructor() { 
this.putRingOnIt - new EventEmitter(); 
j 


liked(): void ( 
this.putRingOnIt.emit("oh oh oh"); 
j 
j 





(D https://en.wikipedia.org/wiki/Observer pattern 
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可 以 看 到 我 们 做 了 完整 的 三 步 动作 : (1) 指定 outputs 配 置 项 ; (2) 创建 一 个 EventEmitter 并 
把 它 赋 值 给 我 们 指定 的 输出 属性 putRingonIt; (3) 当 1iked 方 法 被 调用 时 ， 触 发 这 个 事件 。 


如 果 和 希望 在 一 个 父 级 组 件 中 使 用 这 个 输出 ， 可 以 这 样 做 : 


GComponent ( f 
selector: 'club', 
template: ^ SN 
«div» 
«single-component 
(putRingOnIt)-"ringWasPlaced($event)" 


»«/single-component» 
«/div» 

















1) 
class ClubComponent { 
ringWasPlaced(message: string) { 
console.log(^Put your hands up: $(message]) ^); 
} 
} 


// logged -> "Put your hands up: oh oh oh" 
再 来 回顾 一 下 : 
口 putRingonIt 是 在 SingleCcomponent 的 outputs 配 置 项 中 定义 的 ; 


口 ringWasPlaced 是 ClubComponent 中 的 一 个 方法 ; 
口 $event 包 含 被 触发 事件 参数 (输出 的 内 容 )， 在 这 个 例子 中 是 一 个 字符 串 。 


























3.5.5 ”编写 ProductsList 的 控制 器 类 
回 到 商店 的 例子 ，ProductsList 控 制 器 类 需要 三 个 实例 变量 : 


口 一 个 用 来 保存 产品 列表 (来自 于 productList 输入 ); 
口 一 个 用 来 输出 事件 〈 由 onProductSelected 触 发 ); 
口 一 个 用 来 保存 当前 选中 产品 的 引用 。 


下 面 是 实现 方法 。 


code/how angular works/inventory app/app.ts 

















class ProductsList { 


/** 
* @input productList - the Product[] passed to us 
*/ 
productList: Product[]; 
/** 
* Gouput onProductSelected - outputs the current 
* Product whenever a new Product is selected 
*/ 
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onProductSelected: EventEmitter«Product»; 


/** 

* @property currentProduct - local state containing 
* the currently selected ^Product^ 

*/ 


private currentProduct: Product; 


constructor() { 
this.onProductSelected - new EventEmitter(); 


} 
可 以 看 到 ， 我 们 的 productList 是 一 个 Product 类 型 的 数组 ， 它 来 自 于 inputs。 
onProductSelected 是 我 们 的 输出 。 


currentProduct 是 ProductsList 的 一 个 内 部 属性 。 你 可 能 知道 它 有 时 候 被 称 作 “组 件 本 地 
状态 "。 它 仅 在 组 件 的 内 部 才能 用 到 。 






































3.5.6 ”编写 ProdctsList 的 视图 模板 


下 面 是 products-1ist 组 件 的 template。 





code/how angular works/inventory app/app.ts 
template: ^ 
«div class="ui items"» 
«product-row 
*ngFor-"let myProduct of productList" 
[product]-2"myProduct" 
(click)-2'clicked(myProduct)' 
[class.selected]-"isSelected(myProduct)"» 
«/product-row» 
«/div» 


这 里 用 到 了 ProdquctRow 组 件 的 product-row 标 签 。 我 们 稍 后 就 来 定义 它 。 


我 们 用 ngFor 来 迭代 productsList 中 的 每 个 Product。 本 书 前 面 讨 论 过 ngFor, 但 现在 还 是 提 
WÉ— PF, let thing of things 语 法 是 指 ， 壕 代 things 中 的 每 一 个 元 素 ， 复 制 并 把 它 赋 值 到 变量 
thing 中 去 。 


因此 ， 我 们 在 这 个 例子 中 迭代 了 productList 中 的 Products ， 并 为 每 一 个 元 素 生 成 一 个 


myProduct 变 量 。 




















Q、 从 代码 风格 的 角度 ， 我 不 会 在 真实 应 用 中 把 这 个 变量 命名 为 myProduct ， 而 是 
把 它 叫 作 product 甚 至 p。 但 为 了 把 意思 表达 得 更 明确 ， 我 认为 myProduct 不 太 
容易 引起 歧义 。 
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d 





























意思 的 是 , 我 们 甚至 可 以 在 同一 个 标签 中 使 用 这 个 myProduct 变 量 。 可 以 看 到 , 接 下 来 的 
三 行 代码 里 我 们 就 是 这 么 做 的 。 


[product]="myProduct" 是 指 我 们 要 把 myProduct ( 局 部 变量 ) 传递 给 product-row 的 
product 输 入 。( 我 们 会 在 下 面 定 义 ProductRow 组 件 的 时 候 定 义 这 个 输入 。) 


(click)='clicked(myProduct)' 表 示 当 元 素 被 点 击 的 时 候 我 们 希望 做 什么 click 是 一 个 内 























事件 ， 当 点 击 宿主 元 素 的 时 候 就 会 触发 。 在 这 个 例子 中 ， 当 点 击 此 元 素 时 ， 就 


ProductsList 的 clicked 方 法 。 








会 执行 


[class.selected]="isSelected(myProduct)" 很 有 意思 : Angular 允 许 我 们 通过 这 种 语法 来 
根据 不 同 的 情况 设置 元 素 的 class 属 性 。 这 |: TRANE 意思 是 “如 果 isSelected(myProduct ) 返 回 
true, 就 给 元 素 的 CSS 类 增加 一 个 selected 类 ”。 如 果 需 要 标记 出 当前 选中 的 产品 , 这 会 非常 好 用 。 
你 可 能 已 经 注意 到 了 ， 我 们 还 没有 定义 clicked 和 isSelected 方 法 ,那么 现在 就 开始 吧 (在 
PES Jg 




















1. clicked 


code/how angular works/inventory app/app.ts 


clicked(product: Product): void ( 
this.currentProduct - product; 
this.onProductSelected.emit(product); 
j 


该 函数 会 做 两 件 事 : 
(1) 把 this .currentProduct 设 置 为 传人 的 Product; 
(2) 将 用 户 点 击 的 Product 从 输出 中 传 出 去 。 


2. isSelected 








code/how angular works/inventory app/app.ts 


isSelected(product: Product): boolean { 
if (!product || !this.currentProduct) { 
return false; 
j 
return product.sku === this.currentProduct.sku; 


j 


这 个 方法 接收 一 个 Product。 如 果 这 个 product 的 sku 与 currentProduct 的 sku 一 样 ， 就 返回 
true; 否则 返回 false。 


3.5.7 ”完整 的 ProductsList 组 件 

















下 面 是 一 份 完整 的 代码 清单 ， 我 们 可 以 看 到 代码 的 所 有 上 下 文 。 
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code/how angular works/inventory app/app.ts 


/** 
* @ProductsList: A component for rendering all ProductRows and 
* Storing the currently selected Product 


*/ 
@Component( { 
selector: 'products-list', 
inputs: ['productList'], 
outputs: ['onProductSelected'], 
template: ^ 


«div class-"ui items"» 
«product-row 
*ngFor-"let myProduct of productList" 
product ]="myProduct" 
(click)='clicked(myProduct)' 
class.selected]="isSelected(myProduct)"> 
</product-row> 
</div> 





D) 


class ProductsList { 


/** 
* @input productList - the Product[] passed to us 
*/ 
productList: Product[]; 
/** 
* @ouput onProductSelected - outputs the current 
* Product whenever a new Product is selected 
*/ 
onProductSelected: EventEmitter«Product»; 
/** 
* @property currentProduct - local state containing 
* the currently selected "Product^ 
*/ 


private currentProduct: Product; 


constructor() { 
this.onProductSelected - new EventEmitter(); 


J 


clicked(product: Product): void { 
this.currentProduct - product; 
this.onProductSelected.emit(product); 


} 


isSelected(product: Product): boolean { 
if (!product || !this.currentProduct) { 
return false; 


} 


return product.sku === this.currentProduct.sku; 


} 
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3.6 产品 条 目 组 件 


ProductRow 组 件 用 于 展示 Product ( 如 图 3-9 所 示 )。ProductRow 有 自己 的 模板 ， 但 也 会 被 分 
成 三 个 更 小 的 组 件 : 


口 ProductImage ， 用 来 展示 图 片 ; ON 
O ProductDepartment, ， 用 来 展示 产品 分 类 “面包 居 导 航 ”; 
口 PriceDisplay， 用 来 展示 产品 价格 。 











Blue Jacket $238.99 
SKU $NEATOJACKET 
Women > Apparel > Jackets & Vests 


图 3-9 一 个 被 选中 的 ProductRow 组 件 
可 以 在 图 3-10 中 看 到 这 三 个 组 件 在 ProductRow 中 的 使 用 。 


Blue Jacket 


SKU fNEATOJACKET 


Women > Apparel > Jackets & Vests PriceDisplay 


Productlmage 
3-10 ”ProductRow 的 子 组 件 





下 面 来 看 看 ProductRow 的 组 件 配置 、 定 义 类 和 模板 。 


3.6.1 产品 条 目的 组 件 配置 


code/how angular works/inventory app/app.ts 


/** 
* @ProductRow: A component for the view of single Product 
*/ 
@Component({ 
selector: 'product-row', 
inputs: ['product'], 
host: ['class': 'item'], 
template: ^ 


配置 开头 定义 了 product-row 的 selector 。 我 们 已 经 多 次 看 到 这 个 配置 项 了 ， 这 个 定义 说 明 
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组 件 会 匹配 product-row 标 签 。 





接 下 来 ,我 们 定义 了 一 个 名 为 product 的 输入 。 这 个 输入 就 是 


























父 级 组 件 传 入 的 Product。 
第 三 个 配置 项 host 让 我 们 可 以 在 宿主 元 素 上 配置 元 素 属 性 。 在 这 个 例子 中 ， 我 们 设置 了 


Semantic UI 的 item 样 式 "。host:{'class':'item'} 的 意思 是 ， 我 们 希望 给 宿主 元 素 添加 一 个 名 
为 item 的 CSS 类 。 


























O host 配 置 项 很 有 用 ， 因 为 可 以 在 组 件 内 部 配置 宿主 元 素 。 否 则 必须 在 宿主 元 素 
的 HTML 标签 中 定义 CSS 等 ; 这 样 , 每 次 使 用 该 组 件 时 , 都 需要 手工 编写 CSS 类 ， 
用 起 来 就 不 方便 了 。 


我 们 稍 后 就 会 讨论 template 模 板 。 


3.6.2 ”产品 条 目 组 件 的 定义 类 
ProductRow 组 件 的 定义 类 很 简明 。 


code/how angular works/inventory app/app.ts 
class ProductRow { 
product: Product; 


} 





这 里 我 们 定义 ProductRow 会 有 一 个 实例 属性 product。 因 为 我 们 定义 了 一 个 输入 product 


所 以 每 当 Angular 创 建 这 个 组 件 的 实例 时 ,都 会 自动 帮 我 们 设置 好 product 。 我 们 不 需要 手动 去 做 
也 不 需要 constructor 。 








3.6.3 ”产品 条 目 组 件 的 template 
现在 来 看 看 template 6 


code/how angular works/inventory app/app.ts 
template: ^ 


«product-image [product]-"product"»«/product-image» 
«div class="content"> 


«div class-"header"»(( product.name }}</div> 
«div classz"meta"» 


«div class-"product-sku"»SKU #{{ product.sku }}</div> 
«/div» 


«div class-'"description"» 


«product-department [product]-"product"»«/product-department» 
«/div» 





QD http://semantic-ui.com/views/item.html 
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«/div» 
«price-display [price]-"product.price"»«/price-display» 


我 们 的 模板 中 没有 什么 新 概念 。 


第 一 行使 用 了 product-image 指 令 ， 并 把 我 们 的 product 传 递 到 ProductImage 组 件 的 
product 输 入 中 。 我 们 使 用 product-department 指 令 时 也 是 一 样 。 SEN 


price-display 指 令 的 用 法 略 有 不 同 : 我 们 没有 直接 传递 product , 而 是 传递 了 product price. 
剩 下 的 模板 只 是 带 有 自 定 义 CSS 样 式 和 一 些 模板 绑 定 的 标准 HTML 元 素 。 








3.6.4 完整 的 ProductRow 代码 清单 


下 面 是 ProductRow 组 件 的 全 部 代码 。 

















code/how angular works/inventory app/app.ts 


/** 
* @ProductRow: A component for the view of single Product 
*/ 
@Component({ 
selector: 'product-row', 
inputs: ['product'], 
host: ['class': 'item'], 
template: ^ 


«product-image [product]-"product"»«/product-image» 
«div classz'content"» 
«div class-"header"»(( product.name }}</div> 
«div classz"meta"» 
«div class-"product-sku"»SKU #{{ product.sku }}</div> 
«/div» 
«div class-"description"» 
«product-department [product]-"product"»«/product-department» 
«/div» 
«/div» 
«price-display [price]-"product.price"»«/price-display» 
}) 
class ProductRow { 
product: Product; 


j 
现在 来 看 看 我 们 用 到 的 三 个 组 件 ， 其 代码 都 很 短 。 





3.7 ”产品 图 片 组 件 
首先 看 看 ProductImage。 
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code/how angular works/inventory app/app.ts 
/** 
x @ProductImage: A component to show a single Product's image 
*/ 
GComponent ( f 
selector: 'product-image', 
host: {class: 'ui small image'], 
inputs: ['product'], 
template: ^ 
«img class-"product-image" [src]-"product.imageUrl"» 


}) 
class ProductImage { 
product: Product; 


} 
这 里 唯一 需要 注意 的 是 img 标 签 ， 请 看 看 我 们 是 怎么 使 用 img 中 的 [src] BU. 
我 们 本 来 可 以 这 么 写 : 


«1-- wrong, don't do it this way --» 
«img src="{{ product.imageUrl }}"> 


为 什么 这 样 写 是 错 的 ? 因为 如 果 浏 览 器 在 Angular 运 行 起 来 之 前 就 加 载 了 这 上 段 模板 ， 就 会 尝 
试 以 字符 串 {{ product .imageUrl )) 为 url 来 加 载 图 片 , 这 当然 会 得 到 一 个 “404not found” 错 误 。 





















































在 Angular 运 行 起 来 之 前 ， 浏 览 器 会 在 页 面 上 显示 一 个 破损 的 图 像 。 








通过 [src] 元 素 属 性 , 我 们 告诉 Angular 我 们 和 希望 使 用 img 标 签 的 [src] 输入 。 一 旦 表达 式 的 值 























解析 完成 ，Angular 就 会 把 src 元 素 属性 替换 为 表达 式 的 值 。 





3.8 价格 展示 组 件 


下 面 来 看 看 PriceDisplay 组 件 。 


code/how angular works/inventory app/app.ts 


/** 
* @PriceDisplay: A component to show the price of a 
* Product 
*/ 
@Component( { 
selector: 'price-display', 
inputs: ['price'], 
template: ` 


<div class="price-display">\${{ price }}</div> 


}) 
class PriceDisplay { 
price: number; 


} 
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这 非常 浅显 ,但 要 注意 一 点 ， 因 为 在 模板 字符 串 中 $ 是 用 于 模板 变量 的 特殊 语法 ， 所 以 在 模 
板 中 出 现 $ 的 写法 时 要 进行 转 义 。 


3.9 产品 分 类 组 件 


最 后 是 ProductDepartment 组 件 。 




















code/how angular works/inventory app/app.ts 


/** 
* @ProductDepartment: A component to show the breadcrumbs to a 
* Product's department 


*/ 
@Component( { 
selector: 'product-department', 
inputs: ['product'], 
template: ` 


<div class="product-department"> 
«span xngFor="let name of product.department; let i=index"> 
«a href="#">{{ name }}</a> 
«span»((i < (product.department.length-1) ? '»' : ''jj)«/span» 
«/span» 
«/div» 


}) 
class ProductDepartment { 
product: Product; 


} 
这 里 要 说 明 一 下 ProductDepartment 组 件 中 的 ngFor 和 span 标 签 。 


我 们 使 用 了 ngFor 来 迭代 product .department 中 的 每 个 分 类 , 并 赋值 给 name。 比 较 新 鲜 的 写 
法 是 第 二 个 表达 式 let i=index。 这 是 在 ngFor 中 取得 迭代 序号 的 方法 。 


在 span 标 签 中 ， 我 们 使 用 变量 i 来 判断 是 否 需要 显示 大 于 号 。 
我 们 希望 像 这 样 展示 分 类 : 


Women > Apparel > Jackets & Vests 
























































表达 式 {{i < (product.department.length-1) ? '>，:''}} 意 味 着 ， 只 要 不 是 最 后 一 级 
分 类 ， 就 显示 一 个 '、>' 号 ; 如 果 是 最 后 一 级 分 类 ， 就 显示 一 个 空 字符 


Fa 
o 





Ud 








O 格式 test ? valueIfTrue : valueIfFalse 被 称 作 三 元 操作 符 。 
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3.10 创建 NgModule 并 启动 应 用 























最 后 要 做 的 就 是 创建 NgModule 并 启动 应 用 。 








code/how angular works/inventory app/app.ts 


GNgModule(Í 

declarations: [ 
InventoryApp, 
Productlmage, 
ProductDepartment, 
PriceDisplay, 
ProductRow, 
ProductsList 

] 


imports: [ BrowserModule ], 


bootstrap: [ InventoryApp ] 


D) 


class InventoryAppModule {} 


为 了 帮助 我 们 组 织 代 码 ，Angular 提 供 了 一 个 模块 化 系统 。AngularJS 中 的 所 有 指令 本 质 上 都 




















是 全 局 的 ， 但 在 Angular 中 必须 明确 指出 你 打算 在 应 用 中 使 用 哪些 组 件 。 
虽然 使 用 模块 系统 需要 更 多 的 配置 ,但 对 于 较 大 型 的 应 用 来 说 ， 这 能 避免 很 大 的 麻烦 。 
































要 使 用 你 在 Angular 中 创建 的 新 组 件 ， 它 们 必须 对 于 当前 模块 是 可 访问 的 。 也 就 是 说 ， 如 果 
我 们 要 在 IntentoryApp 的 template 中 通过 products-list 标 签 使 用 ProductsList 组 件 的 话 ， 就 
要 保证 InventoryApp 满 足下 面 的 两 个 条 件 之 一 : 


(1) 和 ProductsList 组 件 在 同一 个 模块 中 ; 
(2) InventoryApp 所 在 的 模块 导入 (imports ) 了 ProductsList 所 在 的 模块 。 














Q、 记 住 : 如 果 要 在 模板 中 使 用 ， 每 一 个 组 件 都 必须 在 同一 个 NgModule 中 声明 。 


在 这 个 例子 里 ， 我 们 将 InventoryApp 、ProductsList 和 应 用 中 的 所 有 其 他 组 件 都 放 在 了 同 
一 个 模块 中 。 这 样 写 容 易 理解 ， 因 为 它们 彼此 之 间 都 是 “可 见 ” 的 。 














会 是 顶层 组 件 。 
因为 我 们 编写 的 是 浏览 
人 列表 imports 里 。 


应 月 


注意 ， 我 们 告诉 NgModule 要 以 InventoryApp 来 启动 ( bootstrap )。 这 就 是 说 InventoryApp 


H, 所 以 也 把 浏览 带 模 块 BrowserModule 放 到 这 个 NgModule 的 导 





Q、 要 了 解 NgModule 的 更 多 细节 ， 请 参考 8.10 节 。 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


3.11 完整 的 项 目 89 





局 动 应 用 


我 们 现在 编写 的 是 一 个 没有 用 到 AoT 预 编译 技术 ( “ahead-of-time”compilation ， 本 书后 面 会 
有 详细 讲解 ) 的 浏览 器 应 用 。 想 启动 应 用 就 要 像 下 面 这 样 做 。 


code/how angular works/inventory app/app.ts 




















platformBrowserDynamic().bootstrapModule(InventoryAppModule); 





3.11 完整 的 项 目 


现在 我 们 已 经 有 了 让 项 目 运 行 起 来 的 所 有 部 分 ! 
全 部 完成 后 ， 应 用 看 起 来 应 该 如 图 3-11 所 示 。 











e e Bi ng-book 2: Inventory App x W — ng-book 





€ CŒ | [5 localhost:8080 灾区 





o ngbook2 Angular 2 Inventory App 


Black Running Shoes 


$109.99 
e SKU #MYSHOES 
~ 
^N Men » Shoes » Running Shoes 
D 

Blue Jacket $238.99 

SKU #NEATOJACKET 

Women > Apparel > Jackets & Vests 

A Nice Black Hat $29.99 


SKU #NICEHAT 


2) 


Men » Accessories » Hats 














图 3-11 ”完成 后 的 应 


uu 








Qs 完整 的 代码 可 以 在 how_angular works/inventory app 里 找到 ,参考 其 中 的 README. 


现在 你 可 以 通过 点 击 来 选中 一 个 特定 的 产品 了 ， 选 中 时 会 在 外 面 显示 一 个 漂亮 的 紫色 边框 。 





图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


90 第 3 章 Angular 的 工作 原理 





如 果 你 在 代码 中 添加 了 新 的 Product ， 它 们 也 会 在 页 面 中 展示 出 来 。 


3.12 ”关于 数据 架构 的 一 点 说 明 


你 可 能 想 知 道 ， 如 果 开始 给 应 用 添加 更 多 功能 ， 该 如 何 管理 数据 流 呢 ? 
例如 ， 假 设 我 们 要 加 入 一 个 购物 车 界面 以 便 添加 和 购买 商品 。 这 该 如 何 实现 呢 ? 


目前 唯一 讨论 过 的 方案 就 是 触发 输出 事件 。 要 在 点 击 “ 添 加 到 购物 车 ”按钮 时 直接 把 
addedToCart 事 件 冒 泡 上 去 ， 然 后 在 根 节 点 处 理 吗 ?这 种 做 法 有 点 怪 。 


数据 架构 是 一 个 庞大 的 主题 ， 其 中 存在 很 多 不 同 的 观点 。 幸 和 运 的 是 ，Angular 可 以 广泛 适应 
各 种 数据 架构 ， 但 这 也 意味 着 你 需要 自己 选择 一 种 。 


在 AngularJS 中 ， 默 认 选 项 是 双向 绑 定 。 双 向 绑 定 在 开发 的 起 步 阶 段 非常 好 用 : 控制 器 保存 
数据 ， 表 单 直接 修改 数据 ， 视 图 显示 数据 。 

不 过 双向 绑 定 的 问题 是 ， 它 经 常 导致 整个 应 用 出 现 级 联 效 应 。 随 着 项 目 规模 的 扩大 ,我 们 会 
越 来 越 难于 追踪 数据 的 流向 。 

双向 绑 定 的 另 一 个 问题 是 ， 由 于 我 们 的 数据 要 通过 组 件 下 发 ,一般 情 况 下 “数据 结构 树 ” 将 
不 得 不 与 “DOM 结 构 树 ”相对 应 。 但 在 实践 中 ， 最 好 把 这 两 件 事 分 开 。 


处 理 这 种 情况 的 方法 之 一 是 创建 数据 服务 ShoppingCartService, 这 是 一 个 保存 当前 购物 车 
中 商品 列表 的 单 例 服 务 。 当 有 数据 变动 时 ， 这 个 服务 就 会 通知 所 有 相关 的 对 象 。 


这 个 主意 看 起 来 够 简单 了 ， 但 在 实践 中 还 有 很 多 需要 解决 的 问题 。 


Angular 中 推荐 的 方式 是 采用 一 种 叫 作 单 向 数据 绑 定 的 方案 (在 其 他 一 些 现代 Web 开 发 框架 中 
也 是 一 样 ， 例 如 React )。 也 就 是 说 ， 你 的 数据 只 会 向 下 流 和 组件。 如 果 你 需要 改变 数据 ， 就 要 在 
顶层 触发 事件 ， 然 后 向 下 流 至 底层 组 件 。 


乍 看 起 来 , 单 向 数据 绑 定 可 能 反而 额外 增加 了 一 些 开销 , 但 实际 上 它 会 大 幅 减 轻 变更 检测 相 
关 的 复杂 度 ， 还 会 使 你 的 系统 行为 更 具 可 预测 性 。 


幸运 的 是 ， 数 据 架 构 管理 方面 只 有 两 个 主要 流派 : 
(1) 使 用 基于 观察 者 模式 的 架构 ， 如 RxJS ; 
(2) 使 用 基于 Flux 的 架构 。 


我 们 稍 后 会 讨论 如 何 为 应 用 实现 一 个 可 扩展 的 数据 架构 , 但 就 目前 来 说 , 基于 组 件 的 应 用 已 
经 完成 了 ， 先 好 好 享受 成 功 的 喜悦 吧 ! 
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4.1 简介 


Angular 提 供 了 若干 内 置 指令 。 在 本 章 中 ， 我 们 将 探讨 每 一 个 内 置 指令 并 通过 示例 教会 你 如 
何 使 用 它们 。 





内 置 指 令 是 已 经 导入 过 的 ， 你 的 组 件 可 以 直接 使 用 它们 。 因 此 ， 不 用 像 你 自己 
的 组 件 一 样 把 它们 作为 指令 导入 进来 。 


4.2 ngIf 


如 果 你 希望 根据 一 个 条 件 来 决定 显示 或 隐藏 一 个 元 素 , 可 以 使 用 ng1f 指 令 。 这 个 条 件 是 由 你 
传 给 指令 的 表达 式 的 结果 决定 的 。 


如 果 表 达 式 的 结果 返回 的 是 一 个 假 值 ， 那 么 元 素 会 从 DOM 上 被 移 除 。 


















































下 面 是 一 些 例子 : 

«div «ngIf-z"false"»«/div» «1-- never displayed --» 

«div x*nglf="a > b"»«/div» <!-- displayed if a is more than b --> 

«div x*nglf="str == 'yes'"»«/div» «!-- displayed if str holds the string "yes" --> 
«div xnglIf-2"myFunc()"»«/div» «1-- displayed if myFunc returns a true value --» 


o 如 果 你 有 AngularJS 的 经 验 ， 那 么 大 概 以 前 已 经 用 过 ngIf 指 令 了 。 你 可 以 把 它 当 

作 AngularJS 中 ng-if 的 替代 品 。 但 另 一 方面 ，Angular 并 没有 为 AngularJS 中 的 
ng-show 指 令 提 供 内 置 的 蔡 代 品 。 那 么 ,如果 你 只 是 想 改变 一 个 元 素 的 CSS 可 见 
性 ， 就 应 该 使 用 ngStyle 或 class 指 令 。 本 章 稍 后 会 介绍 它们 。 
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4.3 ngSwitch 


有 时 候 你 需要 根据 一 个 给 定 的 条 件 来 浑 染 不 同 的 元 素 。 
遇 到 这 种 情况 时 ， 你 可 能 会 像 下面 这 样 多 次 使 用 ngIf: 


«div class="container"> 


«div xngIf-"myVar == 'A'">Var is A«/div» 

«div x«ngIf-"myVar == 'B'">Var is B«/div» 

«div xngIf-"myVar !- 'A' && myVar !- 'B''"»Var is something else«/div» 
«/div» 


TIMARBIT UL, P myvar HELENA DA EBH, ASM, HoscdE LEGOIEZHAGATIS 
只 是 一 个 else 而 已 。 随 着 我 们 添加 的 值 越 来 越 多 ，ngIf 条 件 也 会 变 得 越 来 越 复杂 。 


为 了 说 明 这 种 增长 的 复杂 性 ， 假 设 我 们 想 要 处 理 一 个 新 的 值 C。 








为 了 达到 目的 ， 我 们 不 仅 要 添加 一 个 使 用 ngIf 的 新 元 素 ， 而 ] 





«div class-z"container"» 





是 要 修改 最 后 一 种 情况 : 


«div xngIf-"myVar == 'A''»Var is A«/div» 

«div xngIf-"myVar == 'B'">Var is B«/div» 

«div xngIf-"myVar == 'C''5Var is C«/div» 

«div x«ngIf-"myVar !- 'A' && myVar !- 'B' && myVar !- 'C''5Var is something else«/div» 
«/div» 


对 于 这 种 情况 ，Angular 引 入 了 ngSwitch 指 令 。 


如 果 你 熟悉 switch 语 名 的 话 ， 应 该 会 觉得 似曾相识 。 





指令 背后 的 思想 也 是 一 样 的 : 对 表达 式 进行 一 次 求 值 , 然后 根据 其 结 





AIRETIK 
一 旦 有 了 结果 ， 我 们 就 可 以 : 


口 使 用 ngswitchCase 指 令 描述 已 知 结果 ; 
口 使 用 ngSwitchDefault 指 令 处 理 所 有 其 他 未 知情 况 。 


让 我 们 使 用 这 组 新 的 指令 来 重 写 之 前 的 例子 : 


«div class="container" [ngSwitch]="myVar"> 

«div *ngSwitchCase="'A'">Var is A«/div» 

«div *ngSwitchCase="'B'">Var is B«/div» 

«div xngSwitchDefault»Var is something else«/div» 
«/div» 


如 果 想 要 处 理 新 值 Cc， 只 需要 插入 一 行 : 


«div class="container" [ngSwitch]="myVar"> 
«div *ngSwitchCase="'A'">Var is A«/div» 
«div *ngSwitchCase="'B'">Var is B«/div» 
«div xngSwitchCase-"'C'"»Var is C«/div» 

















果 来 决定 如 何 显示 指令 
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«div xngSwitchDefault»Var is something else«/div» 
«/div» 


不 需要 修改 默认 〈 即 备用 ) 条 件 。 


ngSwitchDefault 元 素 是 可 选 的 。 如 果 我 们 不 用 它 ， 那么 当 myvar 没 有 匹配 到 任何 期 望 的 值 
时 就 不 会 泻 染 任何 东西 。 


你 也 可 以 为 不 同 的 元 素 声明 同样 的 x:ngSwitchCcase 值 ， 这 样 就 可 以 多 次 匹配 同一 个 值 了 。 例 
子 如 下 : 


code/built in directives/app/ts/ng switch/ng switch.ts 





























template: 
«h4 classz"ui horizontal divider header"» 
Current choice is {{ choice }} 
«/h4» 


«div class-"ui raised segment"» 
«ul [ngSwitch]-"choice"» 
«li «ngSwitchCase-"1"»First choice«/li» 
«li x«ngSwitchCase-"2"»Second choice«/li» 
«li x«ngSwitchCase-"3"»Third choice«/li» 
«li x«ngSwitchCase-"4"»Fourth choice«/li» 
«li x«ngSwitchCase-"2"»Second choice, again«/li» 
«li xngSwitchDefault»Default choice«/li» 
«/ul» 
«/div» 


«div style-"margin-top: 20px;'» 
«button class-"ui primary button" (click)-"nextChoice()"» 
Next choice 
«/button» 
«/div» 





在 上 面 的 例子 中 ， 当 choice 的 值 是 2 的 时 候 ， 第 2 个 和 第 5 个 1i 都 会 被 泻 染 。 





4.4 ngStyle 





使 用 ngStyle 指 令 ， 可 以 通过 Angular 表 达 式 给 特定 的 DOM 元 素 设 定 CSS 属 性 。 


该 指令 最 简单 的 用 法 就 是 [style. <cssproperty>]="value" 的 形式 ， 下 面 是 一 个 例子 。 























code/built in directives/app/ts/ng style/ng style.ts 


«div [style.background-color]-"'yellow'"» 
Uses fixed yellow background 
«/div» 


这 个 代码 片段 就 是 使 用 ngstyle 指 令 把 CSS 的 background-color 属 性 设置 为 字符 串 字 面 量 
yellow, 
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另 一 种 设置 固定 值 的 方式 就 是 使 用 ngStyle 属 性 ， 使 用 键 值 对 来 设置 每 个 属性 。 


code/built in directives/app/ts/ng style/ng style.ts 


«div [ngStyle]-"(color: 'white', 'background-color': 'blue'}"> 
Uses fixed white text on blue background 
«/div» 


Q 注意 ， 在 ngStyle 的 说 明 中 ， 我 们 对 background-color 使 用 了 单 引 号 ， 但 却 没 
有 对 color 使 用 。 这 是 为 什么 呢 ? 因为 ngStyle 的 参数 是 一 个 JavaScript 对 象 ， 而 

color 是 一 个 合法 的 键 ， 不 需要 引号 。 但 是 在 background-color 中， 连 字符 是 
不 允许 出 现在 对 象 的 键 名 当中 的 ， 除 非 它 是 一 个 字符 串 ， 因 此 使 用 了 引号 。 
通常 情况 下 ， 我 尽量 不 会 对 对 象 的 键 使 用 引号 ， 除 非 不 得 不 用 。 

我 们 在 这 里 同时 设置 了 color 和 background-color 属 性 。 

但 ngStyle 指 令 真 正 的 能 力 在 于 使 用 动态 值 。 

在 这 个 例子 中 ， 我 们 定义 了 两 个 输入 


code/built in directives/app/ts/ng style/ng style.ts 











Ira 





o 


«div class-"ui input"» 
«input type-"text" name-"color" value="{{color}}" scolorinput» 
«/div» 


«div class-"ui input"» 
«input type="text" name-"fontSize" value-"[(fontSize]])" «fontinput» 
«/div» 


«button class-"ui primary button" (click)-"apply(colorinput.value, fontinput\ 
.value)"» 


Apply settings 
«/button» 


然后 使 用 它们 的 值 来 设置 三 个 元 素 的 CSS 属 性 。 
在 第 一 个 元 素 中 ， 我 们 基于 输入 框 的 值 来 设 定 字体 大 小 。 


code/built in directives/app/ts/ng style/ng style.ts 

















«div» 
«span [ngStyle]-"[color: 'red')" [style.font-size.px]-"fontSize"» 
red text 
</span> 
</div> 


注意 ， 我 们 在 某 些 情况 下 必须 指定 单位 。 例 如 ， 把 font-size 设 置 为 12 不 是 合法 的 CSS， 必 
须 指 定 一 个 单位 ， 比 如 12px 或 者 1.2em。Angular 提 供 了 一 个 便捷 语法 用 来 指定 单位 : 这 里 我 们 使 
用 的 格式 是 [style. fontSize.px]。 
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Ici A . px de ARIE E font-size EARR y [zs Se I] EAE ER 7 [style. 
font-size.em], ， 以 相对 长 度 为 单位 来 表示 字体 大 小 ; 还 可 以 使 用 [style. fontSize.%] ， 以 百 分 
比 为 单位 。 











另外 两 个 元 素 使 用 #colorinput 的 值 来 设置 文字 颜色 和 背景 颜色 。 





code/built in directives/app/ts/ng style/ng style.ts 


«h4 classz"ui horizontal divider header"» 


ngStyle with object property from variable 
«/h4» 





«div» 
«span [ngStyle]-"([color: color}"> 
(( color jJ) text 
«/span» 
«/div» 


«h4 class-z"ui horizontal divider header"» 
style from variable 
«/h4» 


«div [style.background-color]-"color" 
style="color: white;"» 
{{ color }} background 
«/div» 


这 样 ， 当 我 们 点 击 Apply settings 按 钮 时 ， 就 会 调用 方法 来 设置 新 的 值 。 








code/built in directives/app/ts/ng style/ng style.ts 


apply(color: string, fontSize: number) { 
this.color - color; 
this.fontSize - fontSize; 


j 
与 此 同时 ， 文 本 颜色 和 字体 大 小 都 通过 NgStyle 指 令 作用 在 元 素 上 了 。 





4.5 ngClass 


ngClass 指 令 在 HTML 模板 中 用 ngclass 属 性 来 表示 ， 让 你 能 动态 设置 和 改变 一 个 给 定 DOM 
元 素 的 CSS 类 。 


如 果 你 用 过 AngularJS ， 会 发 现 ngClass 指 令 和 过 去 在 AngularJS 中 的 ngClass 所 
做 的 事 是 非常 相似 的 。 








使 用 这 个 指令 的 第 一 种 方式 是 传人 一 个 对 象 字 面 量 。 该 对 象 希望 以 类 名 作为 键 , 而 值 应 该 
一 个 用 来 表明 是 否 应 该 应 用 该 类 的 真 / 假 值 。 





是 
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假设 我 们 有 一 个 叫 作 bordered 的 CSS 类 ， 用 来 给 元 素 添加 一 个 黑色 虚线 边框 。 





code/built in directives/app/css/styles.scss 


.bordered { 
border: 1px dashed black; 
background-color: :seee; 


] 
我 们 来 添加 两 个 div 元 素 : 一 个 一 直 都 有 bordered 类 ( 因此 一 直 有 边框 )， 而 另 一 个 永远 都 








code/built in directives/app/ts/ng class/ng class.ts 


«div [ngClass]-"(bordered: falsej]"»This is never bordered«/div» 
«div [ngClass]-"(bordered: true]"»This is always bordered«/div» 


如 预期 一 样 ， 两 个 div 应 该 是 如 图 4-1 这 样 泻 染 的 。 








This is never bordered 


lind 
s 
z 
D 





图 4-1 ngClass 指 令 的 简 
当然 ， 使 用 ngClass 指 令 来 动态 分 配 类 会 有 用 得 多 。 
为 了 动态 使 用 它 ， 我 们 添加 了 一 个 变量 作为 对 象 的 值 : 


code/built in directives/app/ts/ng class/ng class.ts 





«div [ngClass]-"(bordered: isBordered]"» 
Using object literal. Border {{ isBordered ? "ON" : "OFF" jj 
«/div» 


或 者 在 组 件 中 定义 该 对 象 : 


code/built in directives/app/ts/ng class/ng class.ts 





export class NgClassSampleApp { 
isBordered: boolean; 
classesObj: Object; 
classList: string[]; 


并 直接 使 用 它 : 


code/built in directives/app/ts/ng class/ng class.ts 











«div [ngClass]-"classesObj"» 
Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }} 
«/div» 
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A 再 次 强调 ， 当 你 使 用 像 bordered-box 这 种 包含 连 字 符 的 类 名 时 需要 小 心 。 
JavaScript 对 象 不 允许 字面 量 的 键 出 现 连 字符 。 如 果 确 实 需要 ， 那 就 必须 像 这 样 
用 字符 串 作 为 键 : 


«div [ngClass]-"('bordered-box': false]"»...«/div» 


我 们 也 可 以 使 用 一 个 类 名 列表 来 指定 哪些 类 名 会 被 添加 到 元 素 上 。 为 此 , 我 们 可 以 传人 一 个 
数组 型 字面 量 : 


code/built in directives/app/ts/ng class/ng class.ts 


«div class-"base" [ngClass]-"['blue', 'round']"» 
This will always have a blue background and 
round corners 


«/div» 
或 者 在 组 件 中 声明 一 个 数组 对 象 : 
this.classList = ['blue', 'round']; 
并 把 它 传 进来 : 


code/built in directives/app/ts/ng class/ng class.ts 


«div class-"base" [ngClass]-"classList"» 


This is (( classList.indexOf('blue') > -1 ? "" : "NOT" }} blue 
and {{ classList.indexOf('round') > -1 ? "" : "NOT" }} round 
«/div» 





在 上 个 例子 中 ，[ngClass] 分 配 的 类 名 和 通过 HTML 的 class 属 性 分 配 的 已 存在 类 名 都 是 生 
效 的 。 


最 后 添加 到 元 素 的 类 总 会 是 HTML 属 性 class 中 的 类 和 [ngclass] 指令 求 值 结果 得 到 的 类 的 














在 这 个 例子 中 : 


code/built in directives/app/ts/ng class/ng class.ts 


«div class-"base" [ngClass]-"['blue', 'round']"» 
This will always have a blue background and 
round corners 

«/div» 


元 素 有 全 部 的 三 个 类 : HTML 的 class 属 性 提供 的 base ， 以 及 通过 [ngClass] 分 配 的 blue 和 
round (如 图 4-2 所 示 )。 
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R 0 Elements Console Sources Network Timeline Profiles Resources Audits 


button>Toggle</button: 
b «div class-"selectors'-..-/div 

<div class-"base blue round"> 
This will always have a blue background and | 
round corners 

</div: 

div class="base blue round" 

This is blue 





and round 
/div» 
/style-sample-app: 
«!— Our app loads here 一 > 
/div» 
«!— Code injected by live-server 一 > 


html body div. ui main.text.container style-sample-app 
图 4-2 来 自 属性 和 指令 的 CSS 类 














4.6 ngFor 
这 个 指令 的 任务 是 重复 一 个 给 定 的 DOM 元 素 (或 一 组 DOM 元 素 ), 每 次 重复 都 会 从 数组 中 取 
一 个 不 同 的 值 。 

















e 这 个 指令 是 AngularJS 中 ng-repeat 的 继任 者 。 

















它 的 语法 是 xngFor="let item of items", 

Olet item 语 法 指定 一 个 用 来 接收 items 数 组 中 每 个 元 素 的 (模板 ) 变量 。 
D items 是 来 自 组 件 控制 器 的 一 组 项 的 集合 。 

要 阐明 这 一 点 ,我 们 来 看 一 下 代码 示例 。 我 们 在 组 件 控制 器 中 声明 了 一 个 城市 的 数组 : 
this.cities = ['Miami', 'Sao Paulo', 'New York']; 


Ie TEES UU M PRJHTML S BE. 


code/built in directives/app/ts/ng for/ng for.ts 
«h4 class-"ui horizontal divider header"» 
Simple list of strings 
«/h4» 

















«div class-"ui list" x«ngFor-"let c of cities"> 
«div class="item">{{ c }}</div> 
«/div» 


CZI Edi vrbe ARREST XH, ülllA-3 BT e 





Simple list of strings 
Miami 
Sao Paulo 


New York 





图 4-3 ”使 用 ngFor 指 令 的 结果 
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我 们 还 可 以 这 样 迭 代 一 个 对 象 数 组 。 


code/built in directives/app/ts/ng for/ng for.ts 


this.people - [ 
{ name: 'Anderson', age: 35, city: 'Sao Paulo 
{ name: 'John', age: 12, city: 'Miami' ], 
{ name: 'Peter', age: 22, city: 'New York' ] 


]5 
然后 根据 每 一 行 数 据 泻 染 出 一 个 表格 。 


code/built in directives/app/ts/ng for/ng for.ts 


«h4 class-z"ui horizontal divider header"» 
List of objects 
«/h4» 


«table class-"ui celled table"» 

«thead» 

«tr» 
«th»Name«/th» 
«th»Age«/th» 
«th»City«/th» 

«/tr» 

«/thead» 

«tr «ngFor-z"let p of people"» 
<td>{{ p.name }}</td> 
<td>{{ p.age }}</td> 
<td> {{ p.city }}</td> 


</tr> 
</table> 
结果 如 图 4-4 所 示 。 
List of objects 
Name Age 
Anderson 35 
John 12 
Peter 22 


City 


Sao Paulo 


Miami 


New York 


图 4-4 泻 染 对 象 数 组 








我 们 还 可 以 使 用 嵌 套 数组 。 如 果 想 根据 城市 进行 分 组 ， 可 以 定义 一 个 新 对 象 数组 。 


code/built in directives/app/ts/ng for/ng for.ts 


this.peopleByCity = [ 
{ 
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people: [ 
{ name: 'John', age: 12 } 
{ name: 'Angel', age: 22 } 


) 
( 
city: 'Sao Paulo', 
people: [ 
{ name: 'Anderson', age: 35 }, 
{ name: 'Felipe', age: 36 ] 
] 
} 


]57 
E 


然后 可 以 使 用 ngFor 为 每 个 城市 泻 染 一 个 h2 标 签 。 


code/built in directives/app/ts/ng for/ng for.ts 





«div xngFor-"let item of peopleByCity"» 
«h2 class-"ui header"»[í( item.city )]«/h2» 


JF ELfiH— Piece SOS oc Tar P ATETEA. 


code/built in directives/app/ts/ng for/ng for.ts 








«table class-"ui celled table"» 
«thead» 
«tr» 
«th»Name«/th» 
«th»Age«/th» 
</tr> 
</thead> 
<tr xngFor="let p of item.people"> 
<td>{{ p.name }}</td> 
<td>{{ p.age }}</td> 
</tr> 
</table> 


下 面 是 模板 代码 的 最 终结 果 。 








code/built in directives/app/ts/ng for/ng for.ts 


«h4 class-"ui horizontal divider header"» 
Nested data 
«/h4» 


«div x«ngFor-"let item of peopleByCity"» 
«h2 class-"ui header"»(( item.city }}</h2> 


«table class="ui celled table"» 
«thead» 
«tr» 
«th»Name«/th» 
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«th»Age«/th» 

</tr> 

</thead> 

<tr xngFor="let p of item.people"» 
<td>{{ p.name }}</td> 
<td>{{ p.age }}</td> 

«/tr» 

«/table» 
«/div» 


它 会 为 每 个 城市 演 染 一 个 表格 ， 如 图 4-5 所 示 。 





Nested data 
Miami 
Name Age 
John 12 
Angel 22 
Sao Paulo 
Name Age 
Anderson 35 


Felipe 36 





获取 索引 
在 迭代 数组 时 ， 我们 可 能 也 要 获取 每 一 项 的 索引 。 


我 们 可 以 在 ngFor 指 令 的 值 中 插入 语法 let idx = index 并 用 分 号 分 隔 开 ， 这 样 就 可 以 获取 
索引 了 。 这 时 候 ，Angular 会 把 当前 的 索引 分 配给 我 们 提供 的 变量 〈 在 这 里 是 变量 idx )。 














A 注意 ， 和 JavaScript 一 样 ， 索 引 都 是 从 0 开始 的 。 因 此 第 一 个 元 素 的 索引 是 0， 第 
二 个 是 1， 以 此 类 推 。 
对 我 们 的 第 一 个 例子 稍 加 改动 ， 添 加 代码 段 let num = index. 


code/built in directives/app/ts/ng for/ng for.ts 


«div class-"ui list" x«ngFor-"let c of cities; let num = index"» 
«div class="item">{{ num«1 }} - (( c ])«/div» 
«/div» 
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它 会 在 城市 的 名 称 前 面 添加 序号 ， 如 网 4-6 所 示 。 


List with index 
1- Miami 
2- Sao Paulo 


3- New York 

















图 4-6 ”使 用 索引 





4.7 ngNonBindable 








当 我 们 想 告诉 Angular 不 要 编译 或 者 绑 定 页 面 中 的 某 个 特殊 部 分 时 ， 要 使 用 ngNodBindable 


指令 。 























假设 我 们 想 在 模板 中 泻 染 纯 文 本 {{ content }} 。 通 常情 况 下 ， 这 段 文本 会 被 绑 定 到 变量 
content 的 值 ， 因 为 我 们 使 用 了 {{ }} 模 板 语法 。 


那 该 如 何 泻 染 出 纯 文 本 {{ content. )) JE? 可 以 使 用 ngNonBindable 指 令 。 


假设 我 们 想 要 用 一 个 div 来 泻 染 变量 content 的 内 容 ， 紧 接着 输出 文本 <- this is what 
{{ content }} rendered 来 指向 变量 实际 的 值 。 


为 了 做 到 这 一 点 ， 要 使 用 下 面 的 模板 。 


code/built in directives/app/ts/ng non bindable/ng non bindable.ts 

template: ^ 
«div class-'ngNonBindableDemo'» 

«span class-"bordered"»(( content ))«/span» 

«span class="pre" ngNonBindable» 

&larr; This is what {{ content }} rendered 

«/span» 

«/div» 















































有 了 ngNonBindable 属 性 , Angular 不 会 编译 第 二 个 span 里 的 内 容 , 而 是 原封 不 动 地 将 其 显示 
出 来 ( 如 图 4-7 所 示 )。 


























图 4-7 使 用 ngNonBindable 的 结果 


4.8 ih 


Angular 的 核心 指令 数量 很 少 , 但 我 们 却 能 通过 组 合 这 些 简单 的 指令 来 创建 五 花 八 门 的 应 用 。 
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5.1 表单 一 一 既 重 要 ， 又 复杂 


在 Web 应 用 中 ， 表 单 或 许 是 最 重要 的 部 分 。 虽然 我 们 常 从 点 击 链 接 或 移动 鼠标 中 得 到 事件 通 
知 ， 但 大 多 数 “ 富 数据 ”都 是 通过 表单 从 用 户 那里 获得 的 。 

从 表面 上 看 ， 表 单 似乎 很 简单 : 创建 一 个 input 标 签 ， 用 户 填 人 数据 ， 然 后 再 点 击 提交 。 这 
有 什么 难 的 ? 


但 事实 证 明 ， 表 单 最 终 可 能 是 非常 复杂 的 。 原 因 如 下 : 


口 表单 输入 意味 着 需要 在 页 面 和 服务 器 端 同时 修改 这 份 数据 ; 
口 修改 的 内 容 通常 要 在 页 面 的 其 他 地 方 反映 出 来 ; 

口 用 户 的 输入 可 能 存在 很 多 问题 ， 所 以 需要 验证 输入 的 内 容 ; 
口 用 户 界面 需要 清晰 地 显示 出 可 能 出 现 的 预期 结果 和 错误 信息 ; 
a 字段 之 间 的 依赖 可 能 存在 复杂 的 业务 逻辑 ; 

口 我 们 希望 不 依赖 DOM 选 择 器 就 能 轻松 测试 表单 。 


值得 庆幸 的 是 ，Angular 已 经 给 出 了 上 述 所 有 问题 的 解决 方案 。 


O 表单 控件 (FormControl ) 封装 了 表单 中 的 输入 ， 并 提供 了 一 些 可 供 操纵 的 对 象 。 
口 验证 器 (validator ) 让 我 们 能 以 自己 喜欢 的 任何 方式 验证 表单 输入 。 
O 观察 者 (observer) 让 我 们 能 够 监听 表单 的 变化 ， 并 作出 相应 的 回应 。 


在 本 章 中 , 我 们 将 一 步 一 步 构 建 表单 应 用 。 先 构建 一 些 简单 的 表单 ， 然 后 构建 逻辑 更 复杂 的 
表单 。 




























































































5.2 FormControl 和 FormGroup 


FormControl 和 FormGroup 是 Angular 中 两 个 最 基础 的 表单 对 象 。 
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5.2.1 FormControl 
FormControl 代 表单 一 的 输入 字段 ， 它 是 Angular 表 单 中 的 最 小 单元 。 
FormControl 封 装 了 这 些 字段 的 值 和 状态 ， 比如 是 否 有 效 、 是 否 脏 (被 修改 过 ) 或 是 否 有 错 


IRSF o 


比如 ， 下 列 代 码 演示 了 如 何在 TypeScript 中 使 用 FormControl : 


// create a new FormControl with the value "Nate" 
let nameControl - new FormControl("Nate"); 


























let name - nameControl.value; // -» Nate 


// now we can query this control for certain values: 
nameControl.errors // -» StringMap«string, any» of errors 
nameControl.dirty // -> false 

nameControl.valid // -> true 

// etc. 


为 了 构建 表单 ， 我 们 会 创建 几 组 FormControl 对 象 ， 然 后 为 它们 附加 元 数据 和 逻辑 。 


在 Angular 中 ,我 们 经 常 将 一 个 类 ( 本 例 中 为 FormControl ) 以 属性 形式 ( 本 例 中 为 formControl ) 
附加 在 DOM 上 。 比 如 下 面 这 个 表单 : 


<!-- part of some bigger form --» 
«input type="text" [formControl]-"name" /> 


这 会 在 此 form 的 上 下 文中 创建 一 个 新 的 FormCcontrol 对 象 。 稍 后 我 们 会 进一步 讨论 它 的 工作 
原理 。 











5.2.2 FormGroup 


大 多 数 表单 都 拥有 不 止 一 个 字段 ， 因 此 我 们 需要 某 种 方式 来 管理 多 个 FormControl。 假设 我 
们 要 检查 表单 的 有 效 性 。 如 果 要 遍历 这 个 FormControl 数 组 并 检查 每 一 个 FormControl 是 否 有 效 ， 
必然 相当 繁琐 ; 而 Formcroup 则 可 以 为 一 组 FormControl 提 供 总 包 接 口 ( wrapper interface ), 来 解 
决 这 种 问题 。 
下 面 是 Formcroup 的 创建 方式 : 
let personInfo = new FormGroup({ 
firstName: new FormControl("Nate"), 


lastName: new FormControl("Murray"), 
zip: new FormControl("90210") 

















}) 


FormGroup 和 FormControl 都 继承 自 同一 个 祖先 AbstractControl"。 这 意味 检查 personInfo 





(D https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model.ts 
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的 状态 或 值 就 像 检 查 单个 FormControl 那 么 容易 : 


personInfo.value; // -> { 
// firstName: "Nate", 
// lastName: "Murray", 
// zip: "90210" 

// } 


// now we can query this control group for certain values, which have sensible 
// values depending on the children FormControl's values: 

personInfo.errors // -> StringMap«string, any» of errors 

personInfo.dirty // -> false 

personInfo.valid // -» true 

// etc. 


注意 ， 当 我 们 试图 从 FormGroup 中 获取 value 时 ， 会 收 到 一 个 “ 键 值 对 ”结构 的 对 和 象 。 它 能 
让 我 们 从 表单 中 一 次 性 获取 全 部 的 值 而 无 需 逐 一 遍历 FormControl， 使 用 起 来 相当 顺手 。 








5.3 ”我 们 的 第 一 个 表单 


创建 表单 的 方式 很 多 ， 而 且 好 几 种 重要 的 方式 我 们 还 没有 讨论 到 。 先 来 看 一 个 完整 的 例子 ， 
稍 后 再 一 一 解释 。 





o 本 节 的 所 有 示例 代码 都 可 以 在 forms/ 目 录 下 找到 。 





我 们 要 构建 的 第 一 个 表单 ， 效 果 如 图 5-1 所 示 。 





Demo Form: Sku 


SKU 


Submit 





图 5-1 ” 带 SKU 的 表单 演示 : 简易 版 


假设 我 们 要 构建 一 个 电子 商务 网 站 来 展示 并 销售 一 些 产品 。 在 此 应 用 中 需要 存储 产品 的 
SKU， 因 此 先 来 创建 一 个 只 有 SKU 输 入 框 的 简易 表单 。 








In 








SKU 是 库存 单位 ( stockkeeping unit) 的 缩写 。 它 是 用 来 跟踪 产品 库存 的 唯一 编 
号 。 当 我 们 提 到 SKU 时 ， 指 的 是 人 类 可 读 的 产品 编码 。 


这 个 表单 超级 简单 ， 只 有 一 个 sku( 带 label ) 输入 框 和 一 个 提交 按钮 。 
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我 们 先 把 表单 变 为 组 件 。 你 应 该 还 记得 ， 定 义 组 件 需要 包含 以 下 三 个 部 分 : 
D 配置 ecomponent() 注 解 ; 

a 创建 模板 ; 

口 在 组 件 定义 类 中 实现 自 定义 功能 。 

下 面 来 依次 实现 它们 。 














5.3.1 加 载 FormsModule 


为 了 使 用 这 个 新 的 表单 库 ， 先 要 确保 我 们 的 NgModule 中 导入 了 这 个 表单 库 。 


Angular 中 有 两 种 使 用 表单 的 方式 , 我 们 在 本 章 中 都 会 展开 讨论 : 使 用 FormsModule 以 及 使 用 
ReactiveFormsModule。 既然 都 要 用 到 ， 那么 这 个 模块 就 同时 导入 它们 。 因此 需要 在 引用 启动 程 
序 app.ts 中 这 样 写 : 

import { 

FormsModule, 


ReactiveFormsModule 
) from 'Gangular/forms'; 











// farther down... 


GNgModule(Í 
declarations: [ 
FormsDemoApp, 
DemoFormSku, 
// ... our declarations here 


], 

imports: [ 
BrowserModule, 
FormsModule, // «—- add this 
ReactiveFormsModule  // «-- and this 


], 


bootstrap: [ FormsDemoApp 


}) 


class FormsDemoAppModule {} 


这 确保 了 我 们 能 在 视图 中 使 用 Angular 表 单 指令 。 先 简要 介绍 一 下 ， FormsModule 为 我 们 提供 
了 一 些 模板 驱动 的 指令 ， 例 如 : 
D ngModel 
L] NgForm 











ReactiveFormsModul e 则 提供 了 下 列 指令 : 


口 formControl 





DO ngFormGroup 
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此 外 , 还 有 很 多 指令 。 我 们 还 没有 讨论 过 如 何 使 用 这 些 指令 以 及 它们 是 做 什么 的 ,但 很 快 就 
要 讲 到 了 。 现 在 只 需要 知道 把 FormsModule 和 ReactiveFormsModule 导 和 到 我 们 的 NgModule 中 就 
行 了 。 这 表示 我 们 能 在 视图 中 使 用 上 述 所 有 指令 ， 并 能 在 组 件 中 注入 相应 的 服务 。 














5.3.2 简易 SKU 表单 : GComponent 注解 
现在 我 们 就 可 以 开始 创建 组 件 了 。 


code/forms/app/forms/demo form sku.ts 


import { Component } from 'Gangular/core'; 


GComponent ( f 
selector: 'demo-form-sku', 














这 里 定义 了 一 个 demo-form-sku 的 选择 需 (selector ) 还 记得 吧 ? selector 会 告诉 Angular， 
组 件 将 绑 定 到 哪些 元 素 上 。 这 里 我 们 可 以 通过 demo-form-sku 标 签 来 使 用 这 个 组 件 ; 





«demo- form-sku» «/demo- form-sku» 


5.8.8. 简易 SKU 表单 template 
我 们 来 看 看 template。 


code/forms/app/ts/forms/demo form sku.ts 





template: ^ 
«div class-"ui raised segment"» 
«h2 class-"ui header"»Demo Form: Sku«/h2» 
«form sf-"ngForm" 
(ngSubmit)-"onSubmit(f.value)" 
class-"ui form"» 


«div class-"field'» 
«label forz'"skuInput"»SKU«/label» 
«input type="text" 
idz"skuInput" 
placeholder-"SKU" 
name-z"sku" ngModel» 
«/div» 


«button type="submit" class-"ui button"»Submit«/button» 
«/ form» 
«/div» 


1. form 和 NgForm 
现在 事情 开始 变 得 有 趣 了 : 我 们 导入 了 FormsModule ， 因 此 可 以 在 视图 中 使 用 NgForm 了 。 记 
住 ， 当 这 些 指 令 在 视图 中 可 用 时 ， 它 就 会 被 附加 到 任何 能 匹配 其 selector 的 节点 上 。 
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NgForm 做 了 一 件 便利 但 隐 星 的 工作 : 它 的 选择 器 包含 form 标签 ( 而 不 用 显 式 添加 ngForm 属 
性 )。 这 意味 着 当 我 们 导入 FormsModule 时 候 ，NgForm 就 会 被 自动 附加 到 视图 中 所 有 的 <form; 标 
签 上 。 这 确实 非常 有 用 ， 但 由 于 它 发 生 在 幕后 ， 也 许 会 让 很 多 人 感到 困惑 。 


NgForm 给 我 们 提供 了 两 个 重要 的 功能 : 

(1) 一 个 名 叫 ngForm 的 FormGroup 对 象 ; 

(2) 一 个 输出 事件 (ngSubmit)。 

你 可 以 看 到 我 们 在 视图 的 cform> 标 签 中 同时 用 到 了 它们 两 个 。 


code/forms/app/ts/forms/demo form sku.ts 
































«form sf-"ngForm" 
(ngSubmit)-"onSubmit(f.value)" 


首先 我 们 使 用 了 了 #f=" ngForm", sv-thi ng 语法 的 意思 是 ; 我 们 希望 在 当前 视 图 中 创建 一 个 
局 部 变量 。 

这 里 我 们 为 视图 中 的 ngForm 创 建 了 一 个 别名 ， 并 绑 定 到 变量 #f 。 这 个 ngForm 来 自 哪里 呢 ? 
它 是 由 NgForm 指 令 导出 的 。 

ngForm 是 什么 类 型 的 对 象 呢 ?” 它 是 FormGroup 类 型 的 。 这 意味 着 我 们 可 以 在 视图 中 把 变量 f 
当 作 FormGroup 使 用 ， 而 这 也 正 是 我 们 在 输出 事件 (ngsubmit) 中 的 使 用 方法 。 














A 细心 的 读者 可 能 会 注意 到 ， 上 面 提 到 NgForm 会 自动 附加 到 <formy 标签 上 ( 因为 
NgForm 指 令 的 选择 器 中 默认 包含 了 form )， 这 意味 着 我 们 不 必 添 加 ngForm 属 性 

就 能 使 用 NgForm 指 令 。 但 是 这 里 我 们 也 将 ngForm 添 加 到 了 属性 的 值 上 。 这 是 笔 
误 吗 ? 
不 ， 这 不 是 笔 误 。 如 果 ngForm 是 属性 的 键 ， 那 就 是 在 告诉 Angular: 我 们 要 根据 
这 个 属性 使 用 NgForm 指 令 。 但 在 这 里 ， 我 们 要 对 一 个 引用 赋值 ， 而 把 ngForm 用 
作 属 性 值 。 这 表示 把 ngForm 这 个 表达 式 的 执行 结果 赋值 给 局 部 模板 变量 f。 
既然 ngForm 在 这 个 节点 上 ， 你 应 该 可 以 推断 出 我 们 正在 导出 的 这 个 f 变 量 是 
FormGroup 类 型 的 ， 接 下 来 就 可 以 在 视图 中 的 任何 地 方 引 用 它 了 。 


我 们 在 表单 中 绑 定 ngSubmit 事 件 的 语法 是 : (ngSubmit)="onSubmit(f.value)"。 
O (ngSubmit): 来 自 NgForm 指 令 。 
O onSubmit(): 将 会 在 我 们 的 组 件 类 中 进行 定义 ( 稍 后 )。 
O f.value: f 就 是 我 们 前 面 提 到 的 FormGroup， 而 .value 会 以 键 值 对 的 形式 返回 FormGroup 
中 所 有 控件 的 值 。 
总 结 起 来 ， 这 行 代码 的 意思 是 :“ 当 我 提交 表单 时 ， 将 会 以 该 表单 的 值 作 为 参数 ， 调 用 组 件 
实例 上 的 onSubmit 方 法 。” 
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2. input 和 NgModel 
在 讨论 NgModel 之 前 ， 关 于 input 标 签 还 有 几 点 需要 说 明 。 


code/forms/app/ts/forms/demo form sku.ts 


«form sf-"ngForm" 
(ngSubmit)-"onSubmit(f.value)" 
class-"ui form"» 


«div class-"field'» 
«label forz'"skuInput"»SKU«/label» 
«input type="text" 
idz"skuInput" 
placeholder-"SKU" 
name-"sku" ngModel» 





«/div» 

O class-"ui form" 和 class="field" 是 两 个 可 选 的 类 。 它 们 来 自 CSS 框 架 Semantic UI", © 
们 并 不 属于 Angular 的 范畴 ， 在 这 里 加 上 它们 只 是 为 了 让 本 例子 好 看 一 些 。 
口 1abel 标 签 的 for 属 性 和 input 标 签 的 id 属性 是 一 致 的 ， 这 依据 的 是 W3C 标 准 ?。 
a 我 们 设置 SKU 控 件 的 placeholder 属 性 ， 将 其 作为 input 值 为 空 时 给 用 户 的 提示 。 

NgModel 指 令 指 定 的 selector 是 ngModel 。 这 意味 着 我 们 可 以 通过 添加 这 个 属性 把 它 附 加 到 
input 标 签 上 : ngModel="whatever"。 在 这 里 我 们 指定 了 一 个 不 带 属性 值 的 ngModel 。 

有 两 种 不 同 的 方法 能 在 模板 中 指定 ngModel ， 这 里 是 第 一 种 。 当 使 用 不 带 属性 值 的 ngModel 
时 ， 我 们 是 要 指定 : 

(1) 单 向 数据 绑 定 ; 

(2) 希望 在 表单 中 创建 一 个 名 为 sku 的 FormControl ( 这 个 sku 来 自 input 标 签 上 的 name 属 性 )。 

NgModel 会 创建 一 个 新 的 FormControl 对 象 , 把 它 自动 添加 到 父 FormGroup 上 ( 这 里 也 就 是 form 
表单 对 象 )， 并 把 这 个 FormControl 对 象 绑 定 到 一 个 DOM 上。 也 就 是 说 ， 它 会 在 视图 中 的 input 标 
签 和 FormControl 对 象 之 间 建 立 关联 。 这 种 关联 是 通过 name 属 性 建立 的 ， 在 本 例 中 是 "sku'" 。 





















































ni 



































e NgModel 与 ngModel 有 什么 不 同 呢 ? 通常 ， 我 们 使 用 Pascal 命 名 法 ( de NgModel ) 
时 ， 指 的 是 类 和 供 代 码 中 引用 的 对 象 。 首 字母 小 写 的 驼峰 命名 法 〈 如 ngModel ) 
来 自 指令 的 选择 器 selector， 并 且 只 会 被 用 在 DOM/ 模 板 中 。 
需要 指出 的 是 ，NgModel 和 FormControl 并 不 是 同一 个 。NgModel 是 用 在 视图 中 
的 指令 ， 而 FormControl 则 用 来 表示 表单 中 的 数据 和 验证 规则 。 





(D http://semantic-ui.com/ 
© http://www.w3.org/TR/WCAG20-TECHS/HA4.html 
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有 了 时， 我 们 希望 用 ngModel 来 实现 AngularJS 那 样 的 双向 绑 定 。 在 本 章 的 最 后 ， 
我 们 会 看 到 如 何 进行 实现 。 


5.3.4 简易 SKU 表单 : 组 件 定义 类 
现在 来 看 看 组 件 类 的 定义 。 


code/forms/app/ts/forms/demo form sku.ts 


export class DemoFormSku { 
onSubmit(form: any): void { 
console.log('you submitted value:', form); 
j 
j 


在 这 里 , 我 们 的 类 定义 了 一 个 名 为 onSubmit 的 方法 , 该 方法 会 在 表单 提交 时 调用 。 目 前 我 们 
只 用 console.1og 打 印 出 传 进去 的 值 。 








5.3.5 WWE 
全 部 代码 如 下 所 示 。 


code/forms/app/ts/forms/demo form sku.ts 





import ( Component } from 'Gangular/core'; 


GComponent( f 
selector: 'demo-form-sku', 


template: ^ 
«div class-"ui raised segment"» 
«h2 class-"ui header"»Demo Form: Sku«/h2» 
«form sf-"ngForm" 
(ngSubmit)-"onSubmit(f.value)" 
class-"ui form"> 


«div class-"field"» 
«label for-z"skuInput"»SKU«/label» 
«input type="text" 
id-"skuInput" 
placeholder-z"SKU" 
name-z"sku" ngModel» 
«/div» 


«button type="submit" class-"ui button"»Submit«/button» 
«/ form» 


«/div» 


}) 
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export class DemoFormSku { 
onSubmit(form: any): void { 
console.log('you submitted value:', form); 
j 
j 


如 果 打 开 浏 览 需 运 行 代码 ， 结 果 如 图 5-2 所 示 。 


G 7c O / P angular2 - Forms: Forms x 





| ng-book | 





CŒ | D localhost:8080 





Q O | Elements Console Sources Network Timeline >» 
Bez Angular 2 Forms Example © ^ «topframe» v O Preserve log 


you submitted value: Object (sku: "ABCI23") demo form sku.ts:16 





Demo Form: Sku 
SKU 


ABC123 


Submit 








X 





图 $-2” 带 SKU 的 表单 演示 : 简易 版 ， 已 提交 





5.4 使 用 FormBuilder 





使 用 ngForm 和 ngControl 隐 式 构建 FormControl 和 FormGroup 确 实 很 方便 ,但 无 法 为 我 们 提供 
更 多 定制 化 选项 。 使 用 FormBui lder 构 建 表 单 则 是 一 种 更 为 灵活 和 通用 的 方式 。 


FormBuilder 是 一 个 名 副 其 实 的 表单 构建 助手 。 你 应 该 还 记得 ， 表 单 是 由 Formcontrol 和 
FormGroup 构 成 的 ， 而 FormBuilder 则 可 以 帮助 我 们 创建 它们 (你 可 以 把 它 看 作 一 个 “工厂 ” 
对 象 )。 


让 我 们 在 先前 的 例子 中 添加 一 个 FormBuilder ， 看 看 : 


a 如 何在 组 件 定义 类 中 使 用 FormGroup; 
口 如 何在 视图 表单 中 使 用 自 定义 的 FormGroup。 
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5.5 响应 式 表 单 FormBuilder 


我 们 将 使 用 formcGroup 和 formCcontrol 指 令 来 构建 这 个 组 件 ， 这 意味 着 我 们 需要 导入 相应 的 
类 。 导 入 的 代码 如 下 所 示 。 











code/forms/app/ts/forms/demo form sku with builder.ts 


import ( Component } from 'Gangular/core'; 
import { 

FormBuilder, 

FormGroup 
} from 'Gangular/forms'; 


GComponent( { 
selector: 'demo-form-sku-builder', 


5.5.1 使 用 FormBuilder 


通过 在 组 件 类 上 声明 带 参 数 的 constructor ， 我 们 注入 了 一 个 FormBuilder。 


code/forms/app/ts/forms/demo form sku with builder.ts 


export class DemoFormSkuBuilder { 
myForm: FormGroup; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group(í 
'sku': ['ABC423'] 
1) 
} 


onSubmit(value: string): void { 
console.log('you submitted value: ', value); 


J 
} 


A 注入 意味 着 什么 ? 我 们 还 未 曾 深 入 讨论 过 依赖 注入 (dependency injection, DI) 
以 及 DI 是 如 何 关联 到 继承 树 的 ， 因 此 你 可 能 看 不 太 懂 最 后 这 和 句 话 。 我 们 在 第 8 
章 中 讨论 了 很 多 关于 依赖 注入 的 知识 ， 如 果 你 希望 深入 学 习 ， 请 移 步 那里 。 
大 体 来 说 , 依赖 注入 就 是 用 来 告诉 Angular， 为 了 让 组 件 正 常 运 行 需要 给 它 哪些 
依赖 。 














在 这 期 间 , Angular 将 会 注入 一 个 从 FormBuilder 类 创建 的 对 象 实例 ,并 把 它 赋值 给 fb 变量 ( 来 
自 构 造 函数 )。 


我 们 将 会 使 用 FormBuilder 中 的 两 个 主要 函数 : 
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口 control ， 用 于 创建 一 个 新 的 FormControl ; 
D group ， 用 于 创建 一 个 新 的 FormGroup 。 


注意 ， 我 们 在 类 中 创建 了 一 个 名 叫 myForm 的 实例 变量 。( 简单 起 见 ， 确 实 也 可 以 把 它 称 作 
form， 但 这 里 是 为 了 区 分 Formcroup 和 之 前 的 form 表 单 。) 


myForm 是 FormGroup 类 型 。 我 们 通过 调用 fb .group() 来 创建 FormGroup 。 .group 方 法 的 参数 
是 代表 组 内 各 个 FormControl 的 键 值 对 。 


在 这 里 ， 我 们 设置 了 一 个 名 为 sku 的 控件 ， 其 值 为 ["ABC123"] 一 一 意思 是 控件 的 默认 值 为 
"ABC123" 。( 你 可 能 注意 到 了 这 里 用 的 是 数组 。 这 是 因为 我 们 稍 后 还 会 添加 更 多 配置 项 。) 


现在 我 们 就 能 在 视图 中 使 用 myForm 了 。( 也 就 是 说 ， 我 们 需要 将 它 绑 定 到 表单 元 素 上 。 ) 




























































































5.5.2 ”在 视图 中 使 用 myForm 

我 们 希望 修改 <form;> 标 签 ， 让 它 使 用 myForm 变 量 。 回 忆 一 下 ， 在 上 一 节 中 我 们 提 到 过 ， 当 
导入 FormsModule 时 , ngForm 就 会 自动 起 作用 。 还 提 到 过 ngForm 会 自动 创建 它 自己 的 FormGroup。 
但 在 这 里 我 们 不 希望 使 用 外 部 的 Formcroup , 而 是 使 用 FormBuilder 创 建 的 这 个 myForm 实 例 变量 。 
那 该 怎么 做 呢 ? 

Angular 提 供 了 另 一 个 指令 ， 能 让 我 们 使 用 现 有 的 FormGroup 。 它 叫 作 formcroup ， 可 以 这 样 
使 用 。 


code/forms/app/ts/forms/demo form sku with builder.ts 








«h2 class-"ui header"»Demo Form: Sku with Builder«/h2» 
«form [formGroup]-"myForm" 


这 里 我 们 告诉 Angular， 想 用 myForm 作 为 这 个 表单 的 FormGroup。 


我 们 说 过 ， 当 使 用 FormsModule 时 ，NgForm 会 自动 应 用 于 <form> 元 素 上 。 但 其 
实 有 一 个 例外 : NgForm 不 会 应 用 到 带 formGroup 属 性 的 <form> 节 点 上 。 
你 也 许 不 明白 原因 ， 这 是 因为 NgForm 的 selector 是 : 


form:not( [ngNoForm]):not( [formGroup]) , ngForm, [ngForm] 


这 意味 着 你 还 可 以 使 用 ngNoForm 属 性 产生 一 个 不 带 NgForm 的 <form> 表 单 。 





我 们 还 需要 把 onSubmit 中 的 f 蔡 换 为 nyForm， 因 为 现在 的 myForm 变 量 中 保存 着 表单 的 配置 
和 值 。 

想 让 程序 运行 起 来 ， 还 要 做 最 后 一 件 事 : 将 我 们 的 Formcontrol 绑 定 到 input 标 签 上 。 记 住 ， 
ngControl 会 创建 一 个 新 的 FormControl 对 象 ， 并 附加 到 父 FormGroup 中 。 但 在 这 个 例子 中 , 我 们 
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已 经 用 FormBuilder 创 建 了 自己 的 FormControl。 
要 将 现 有 的 FormControl 绑 定 到 input 上 ， 可 以 用 formControl。 


code/forms/app/ts/forms/demo form sku with builder.ts 


«label forz'"skuInput"»SKU«/label» 

«input type="text" 
idz"skuInput" 
placeholder-"SKU" 
[formControl]-2"myForm.controls['sku']"» 


在 这 里 ， 我 们 将 input 标 签 上 的 formcontrol 指令 指向 了 myForm.controls 上 现 有 的 
FormControl 控 件 sku。 


553 WWE 
将 上 面 的 所 有 代码 整合 在 一 起 。 


code/forms/app/ts/forms/demo form sku with builder.ts 


import ( Component } from 'Gangular/core'; 
import { 

FormBuilder, 

FormGroup 
) from 'Gangular/forms'; 


GComponent( f 
selector: 'demo-form-sku-builder', 
template: ^ 
«div class-"ui raised segment"» 
«h2 class-"ui header"»Demo Form: Sku with Builder«/h2» 
«form [formGroup]-"myForm" 
(ngSubmit)-"onSubmit(myForm.value)" 
class-"ui form"» 


«div class-"field"» 
«label forz"skulnput"»SKU«/label» 
«input type="text" 
id-"skuInput" 
placeholder-z"SKU" 


[formControl]z2"myForm.controls['sku']"» 
«/div» 


«button type="submit" class-"ui button"»Submit«/button» 
«/ form» 


«/div» 

}) 

export class DemoFormSkuBuilder { 
myForm: FormGroup; 
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constructor(fb: FormBuilder) { 
this.myForm = fb.group(í 
'sku': ['ABC423'] 


; 
j 
onSubmit(value: string): void { 
console.log('you submitted value: ', value); 
j 
j 
你 需要 记 住 以 下 两 点 。 








如 果 想 隐 式 创建 新 的 FormGroup 和 FormControl， 使用: 





U ngForm 
U ngModel 











如 果 要 绑 定 一 个 现 有 的 FormGroup 和 FormControl， 使用: 


Q formGroup 
口 formControl 





5.6 添加 验证 


用 户 输入 的 数据 格式 并 不 总 是 正确 的 ,如 果 有 人 输入 了 错误 的 数据 格式 ,我 们 希望 给 他 反馈 ， 
并 阻止 他 提交 表单 。 因 此 ， 我 们 要 用 到 验证 器 。 
































验证 器 由 validators 模 块 提供 。Vvalidators.required 是 最 简单 的 验证 , 表明 指定 的 字段 是 
必 填 项 ， 否 则 就 认为 这 个 FormControl 是 无 效 的 。 


想 使 用 验证 器 ， 我 们 得 做 两 件 
(1) 为 FormControl 对 象 指 定 一 个 验证 器 ; 
Q) 在 视图 中 检查 验证 融 的 状态 ， 并 据 此 采取 行动 。 


要 为 FormControl 对 象 分 配 一 个 验证 器 ， 我 们 可 以 直接 把 它 作为 第 二 个 参数 传 给 
FormControl 的 构造 函数 。 

















iini 


T 











let control - new FormControl('sku', Validators.required); 


也 可 以 像 这 个 例子 中 一 样 通过 如 下 语法 使 用 FormBuilder。 




















code/forms/app/ts/forms/demo form with validations explicit.ts 
constructor(fb: FormBuilder) { 
this.myForm = fb.group(í 
'sku': ['', Validators.required] 


5; 
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this.sku = this.myForm.controls['sku']; 


} 
现在 要 在 视图 中 使 用 验证 了 。 在 视图 中 访问 验证 的 值 有 以 下 两 种 方法 。 


(1) 我 们 可 以 显 式 地 把 sku 这 个 FormControl 赋 值 给 类 的 实例 变量 。 这 有 点 曼 嗪 ， 但 便于 我 们 
在 视图 中 访问 这 个 FormControl 。 


(2) 我 们 也 可 以 在 myForm 中 查找 sku 这 个 FormControl。 这 样 能 简化 组 件 类 中 的 工作 , 但 在 视 
图 中 会 稍微 麻烦 些 。 


为 了 说 明 两 者 之 间 的 差异 ， 我 们 来 看 两 个 例子 。 














5.6.1 显 式 地 把 sku 设置 为 实例 变量 
图 5-3 展 示 了 这 个 带 验 证 功能 的 表单 应 该 是 什么 样子 的 。 





GO 7c O / P angular2 - Forms: Forms | x ng-book 


Q D localhost:8080 Wz 





BB Angular 2 Forms Example 


Demo Form: with validations (explicit) 
SKU 


SKU 
SKU is invalid 
SKU is required 


Form is invalid 


Submit 





图 5-3” 带 验证 器 的 演示 表单 


在 视图 中 ， 处 理 单个 FormControls 的 最 灵活 的 方式 是 将 每 个 FormControl 都 定义 在 组 件 类 
上 。 把 sku 定 义 在 类 上 的 代码 如 下 所 示 。 




















code/forms/app/ts/forms/demo form with validations explicit.ts 


export class DemoFormWithValidationsExplicit { 
myForm: FormGroup; 
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Sku: AbstractControl; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group(í 
'sku': ['', Validators.required] 


5; 


this.sku = this.myForm.controls['sku']; 


} 
onSubmit(value: string): void { 
console.log('you submitted value: ', value); 
j 
j 
注意 : 





(D 我 们 在 类 的 顶部 设置 sku: AbstractControl; 
(2) 我 们 把 用 FormBuilder 创 建 的 myForm 赋 值 给 this.sku 变 量 。 


非常 好 ， 这 意味 着 我 们 可 以 在 组 件 视 图 中 到 处 引用 sku 了 。 不 过 这 样 做 有 一 个 缺点 : 我 们 不 
得 不 为 表单 中 的 每 个 字段 定义 一 个 实例 变量 。 对 大 型 表单 而 言 ， 这 会 显得 相当 嗓 嗪 。 


现在 我 们 的 sku 可 以 得 到 验证 了 。 我 们 要 以 四 种 不 同 的 方式 把 它 用 在 视图 中 : 
(1) 检查 整个 表单 的 有 效 性 并 显示 一 条 错误 信息 ; 

(2) 检查 单个 字段 的 有 效 性 并 显示 一 条 错误 信息 ; 

(3) 检查 单个 字段 的 有 效 性 ， 当 字段 无 效 时 将 字段 显示 为 红色 ; 

(4) 检查 单个 字段 在 特定 规则 下 的 有 效 性 并 显示 一 条 错误 信息 。 

1. 表单 信息 

我 们 可 以 通过 myForm.valid 来 检查 整个 表单 的 有 效 性 。 


code/forms/app/ts/forms/demo form with validations explicit.ts 








«div «ngIfz"!sku.valid" 
class-"ui error message"»SKU is invalid«/div» 


记 住 , myForm 是 一 个 FormGroup; 只 有 当 里 面 所 有 的 FormCcontrol 都 有 效 时 , 这 个 FormGroup 
才 有 效 。 

2. 字段 信息 

当 字 段 的 FormControl 无 效 时 ， 我 们 也 可 以 为 该 字段 显示 一 条 错误 信息 。 





code/forms/app/ts/forms/demo form with validations explicit.ts 


«div «ngIfz"!sku.valid" 
class-"ui error message"»SKU is invalid«/div» 
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«div «ngIfz2"sku.hasError('required')" 
class-"ui error message"»SKU is required«/div» 


3. 字段 着 色 


这 人 UICSS 框 架 的 CSS 类 .error 。 当 给 cdqiv class= "fieldq"y 节 点 加 上 CSS 
类 error 时 ， 这 个 输入 框 就 会 带 有 红色 的 边框 。 


我 们 可 以 使 用 这 种 “属性 语法 ”来 有 条 件 地 设置 这 个 CSS 类 。 


code/forms/app/ts/forms/demo form with validations explicit.ts 


























[HI 








<div class="field" 
[class.error]-"!sku.valid && sku.touched"» 


主意 ， 这 里 我 们 为 .error 类 设置 了 两 个 条 件 : 检查 !sku.valid 和 sku.touched。 这 是 因为 我 
d. 4 有 当 用 户 修 改过 表单 后 (touched ) 才 显 示 错 误 状 态 。 


试 着 在 input 标 签 中 输入 一 些 数据 ， 然 后 删除 这 个 字段 的 内 容 。 
4. 特定 验证 


可 能 有 很 多 原因 导致 一 个 表单 字段 无 效 。 对 于 失败 的 验证 , 我 们 通常 布 望 根据 不 同 的 原因 显 
示 不 同 的 消息 。 


我 们 可 以 用 hasError 方 法 来 检查 特定 的 验证 失败 。 


code/forms/app/ts/forms/demo form with validations explicit.ts 














«div «ngIfz2"sku.hasError('required')" 
class-"ui error message"»SKU is required«/div» 


注意 ，FormControl 和 FormGroup 都 定义 了 hasError 方 法 。 这 意味 着 我 们 可 以 给 它 传人 第 二 
个 参数 path 来 在 FormGroup 中 查询 特定 的 字段 。 比 如 可 以 这 样 写 : 


«div *ngIlf="myForm.hasError('required', 'sku')" 
class-"error"»SKU is required«/div» 





5. 整合 
下 面 是 我 们 把 FormControl 用 作 实 例 变量 来 实现 验证 功能 的 完整 代码 。 


code/forms/app/ts/forms/demo form with validations explicit.ts 











/* tslint:disable:no-string-literal */ 
import ( Component } from 'Gangular/core'; 
import { 

FormBuilder, 

FormGroup, 

Validators, 

AbstractControl 
) from 'Gangular/forms'; 


GComponent( { 
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selector: 'demo-form-with-validations-explicit', 
template: ^ 
«div class="ui raised segment"» 
«h2 class-"ui header"»Demo Form: with validations (explicit)«/h2» 
«form [formGroup]-"myForm" 
(ngSubmit)-"onSubmit(myForm.value)" 
class-"ui form"» 


«div class-"field" 
[class.error]-"!sku.valid && sku.touched"» 
«label forz'"skuInput"»SKU«/label» 
«input type="text" 
idz"skuInput" 
placeholder-"SKU" 
[formControl]-2"sku"» 
«div x«ngIfz"!sku.valid" 
class-"ui error message"»SKU is invalid«/div» 
«div xngIfz"sku.hasError('required')" 
class-"ui error message"»SKU is required«/div» 
«/div» 





«div xngIfz"!myForm.valid" 
class-"ui error message"»Form is invalid«/div» 


«button type="submit" class-"ui button"»Submit«/button» 
</form> 


</div> 


}) 

export class DemoFormWithValidationsExplicit { 
myForm: FormGroup; 
Sku: AbstractControl; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group(( 
sku': ['', Validators.required] 


this.sku = this.myForm.controls['sku']; 


j 


onSubmit(value: string): void { 
console.log('you submitted value: ', value); 


j 
】 


6. 移 除 sku 实 例 变 量 


在 上 面 的 例子 中 ， 我 们 将 sku: AbstractControl 设 置 为 一 个 实例 变量 。 通 常 ， 我 们 不 希望 
为 每 一 个 AbstractControl 控 件 都 创建 一 个 实例 变量 。 在 没有 实例 变量 的 情况 下 ， 我们 该 如 何在 
视图 中 引用 FormControl 呢 ? 
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rr 
o 


我 们 可 以 改 用 myForm.controls 属 怕 
code/forms/app/ts/forms/demo form with validations shorthand.ts 


«input type="text" 
id="skuInput" 
placeholder="SKU" 
[formControl]-"myForm.controls['sku']"» 
«div xngIfz"!myForm.controls['sku'].valid" 
class-"ui error message"»SKU is invalid«/div» 
«div xngIf-"myForm.controls['sku'].hasError('required')" 


class-"ui error message"»SKU is required«/div» 


通过 这 种 方式 ， 我 们 就 不 用 被 迫 在 组 件 类 中 显 式 定 义 实例 





变量 来 访问 sku 控 件 了 。 


5.6.2 ” 自 定义 验证 器 
我 们 经 常 要 写 一 些 自 定 义 验 证 器 ， 下 面 来 看 看 如 何 实现 。 
要 明白 如 何 实现 自己 的 验证 器 , 不 妨 看 看 Angular 源 代码 中 是 如 何 实现 validators .required 的 : 





export class Validators { 
static required(c: FormControl): StringMap«string, boolean» { 


return isBlank(c.value) || c.value == "" ? ("required": true] : null; 


j 
一 个 验证 需 : 


OQ 接收 一 个 FormControl 作 为 输入 ; 
口 当 验 证 失败 时 ， 会 返回 一 个 StringMap<string，boolean> 对 象 ， 它 的 键 是 “错误 代码 ”， 








值 是 true o 


1. 编写 验证 器 
假设 我 们 的 sku 有 特殊 的 验证 需求 , 比如 sku 必 须 以 123 作 为 开始 。 我们 写 的 验证 器 是 这 样 的 : 


code/forms/app/ts/forms/demo form with custom validations.ts 


function skuValidator(control: FormControl): { [s: string]: boolean } { 


if (!control.value.match(/^123/)) ( 
return ([invalidSku: true]; 


} 
} 


当 输 入 值 ( 控件 的 值 control.value ) 不 是 以 123 作 为 开始 时 ， 验 证 器 会 返回 错误 代码 

















invalidSku。 


2. 给 FormCcontrol 分 配 验证 器 





个 小 问题 sku 已 经 有 一 个 验证 器 了 ， 怎 样 才能 








现在 要 为 FormControl 添 加 验证 ,但 是 有 
在 同一 个 字段 上 添加 多 个 验证 器 呢 ? 
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我 们 可 以 用 validators.compose 来 实现 。 


code/forms/app/ts/forms/demo form with custom validations.ts 


constructor(fb: FormBuilder) { 
this.myForm = fb.group(í 
'sku': ['', Validators.compose([ 
Validators.required, skuValidator])] 


5; 


Validators.compose 把 两 个 验证 器 包装 在 一 起 ， 我 们 可 以 将 其 赋值 给 FormControl。 只 有 当 
两 个 验证 都 合法 时 ，FormControl 才 是 合法 的 。 


现在 就 能 在 视图 中 使 用 这 个 新 的 验证 器 Gm 


code/forms/app/ts/forms/demo form with custom validations.ts 




















«div «nglIfz"sku.hasError('invalidSku')" 
class-"ui error message"»SKU must begin with «span»123«/span»«/div» 


e» 注意 ， 我 们 在 本 节 中 为 每 个 FormControl 都 显 式 添 加 了 实例 变量 。 这 意味 着 ， 
在 本 节 的 视图 中 sku 引 用 的 是 一 个 FormControl 。 


运行 示例 代码 ， 你 会 注意 到 有 一 点 很 奇妙 : 当 你 在 字段 中 输入 一 些 内 容 时 ,满足 了 required 


验证 ， 但 违反 了 invalidSku 验 证 。 棒 极 了 ， 这 意味 着 我 们 可 以 对 字段 进行 部 分 验证 并 显示 相应 
的 信息 。 








57 监听 变化 


到 目前 为 止 , 我 们 只 在 提交 表单 时 才 调 用 onSubmit 方 法 来 获取 表单 的 值 。 但 我 们 也 要 经 常 监 
听 控 件 的 变化 。 


Formcroup 和 FormControl 都 带 有 EventEmitter( 事件 发 射 器 ), 我 们 可 以 通过 它 来 观察 变化 。 








e EventEmitter 是 一 个 可 观察 对 象 ， 符 合 “变化 监听 ”规范 。 如 果 你 对 可 观察 对 
象 的 规范 感 兴趣 ， 可 以 参见 https://github.com/jhusain/observable-spec。 

想 监 听 控 件 的 变化 ， 我 们 要 : 

(1) 通过 调用 control .valueChanges 访 问 到 这 个 EventEmitter; 

(2) 然后 使 用 .subscribe 方 法 添加 一 个 监听 器 。 

下 面 是 一 个 例子 。 
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code/forms/app/ts/forms/demo form with events.ts 


constructor(fb: FormBuilder) { 
this.myForm = fb.group(í 
'sku': ['', Validators.required] 


; 
this.sku - this.myForm.controls['sku']; 


this.sku.valueChanges.subscribe( 
(value: string) => { 
console.log('sku changed to:', value); 
j 
)? 


this.myForm.valueChanges.subscribe( 
(form: any) => { 
console.log('form changed to:', form); 
j 
» 


j 
在 这 里 我 们 监听 了 两 个 事件 : sku 字 段 的 变化 和 整个 表单 的 变化 。 
我 们 传递 了 一 个 带 有 next 键 的 对 象 (也 可 以 传递 其 他 键 ， 但 目前 还 不 用 关心 它们 ) next 
是 我 们 希望 当 值 发 生变 化 时 被 调用 的 函数 。 
如 果 在 输入 框 中 输入 kj， 就 会 在 控制 台中 看 到 : 
sku changed to: k 
form changed to: Object {sku: "k"} 


sku changed to: kj 
form changed to: Object {sku: "kj"} 

















如 你 所 见 ， 每 一 次 按键 都 会 触发 控件 的 变化 ， 我 们 的 可 观察 对 象 也 会 被 触发 。 监 听 单 个 
FormControl 时 ， 我 们 会 得 到 一 个 值 ( 例如 kj ); 而 监听 整个 表单 时 ， 我 们 会 得 到 一 个 包含 键 值 
对 的 对 象 ( 例 如 {sku: "kj"} )。 





5.8 ngModel 


ngMode1 是 一 个 特殊 的 指令 , 它 将 模型 绑 定 到 表单 中 。ngMode1 的 特殊 之 处 在 于 它 实 现 了 双向 
绑 定 。 相 对 于 单 向 绑 定 来 说 ， 双 向 绑 定 更 加 复杂 和 难以 推断 。Angular 通 常 的 数据 流向 是 单 向 的 : 
自 顶 向 下 。 但 对 于 表单 来 说 ， 双 向 绑 定 有 时 会 更 容易 。 








不 要 仅仅 因为 你 以 前 在 AngularJS 中 用 过 ng-model 而 急于 使 用 ngModel ， 因 为 有 
很 多 避免 使 用 双向 绑 定 的 理由 。 当 然 ，ngModel 确 实用 起 来 更 方便 ， 但 要 记 住 
Angular 已 经 不 像 AngularJS 那 样 必 须 依 赖 双向 绑 定 了 。 
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下 面 对 表 单 稍 作 修改 : 我 们 希望 能 输入 产品 名 称 productName 。 这 次 要 用 ngMode1l 来 保持 组 
件 实例 和 视图 的 同步 。 


Tc, 我们 的 组 件 定 义 类 如 下 所 示 。 


code/forms/app/ts/forms/demo form ng model.ts 


export class DemoFormNgModel { 
myForm: FormGroup; 
productName: string; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group({ 
'productName': ['', Validators.required] 


5; 
} 





onSubmit(value: string): void { 
console.log('you submitted value: ', value); 


j 
} 


， 我 们 只 是 简单 地 将 productName: string 存 成 了 实例 变量 。 
紧 接着 ， 我 们 在 input 标 签 上 使 用 ngModel o 





code/forms/app/ts/forms/demo form ng model.ts 


«label for-"productNameInput"»Product Name«/label» 
«input type="text" 
id-"productNameInput" 
placeholder-z"Product Name" 
[formControl]-2"myForm.get('productName')" 
[(ngModel)]-2"productName"» 





意 ， 这 里 ngModel 的 语法 很 有 意思 : 我 们 在 ngModel 属性 上 同时 使 用 了 () 和 [] 。 我 们 既 使 


用 了 表示 输入 属性 CeInput ) 的 方 括号 [] ， 又 使 用 了 表示 输出 属性 Ceoutput ) 的 圆 括号 () X 
就 是 双向 绑 定 的 标志 。 























另外 还 需要 注意 的 是 : 我 们 仍然 用 formcontrol 指定 此 input 应 该 绑 定 到 表单 上 的 
FormControl 。 这 是 因为 ngModel 只 负责 将 input 绑 定 到 对 象 实例 上 ， 但 Formcontrol 的 功能 是 与 
此 独立 的 。 由 于 我 们 还 需要 对 这 个 值 加 以 验证 并 把 它 作 为 表单 的 一 部 分 提交 上 去 ， 仍 要 保留 


formControl 指 令 。 



































最 后 ， 我 们 把 产品 名 称 productName 值 显示 在 视图 中 。 








code/forms/app/ts/forms/demo form ng model.ts 


«div class-"ui info message"> 


The product name is: ([productName]] 
«/div» 
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运行 效果 图 如 图 5-4 所 示 。 








©&® / P angular 2 - Forms: Forms -— 
O | Elements Console Sources Network Timeline » 


© | D localhost:8080 
民 
| G Ww «topframe» v 口 Preservelog 


Be Angular 2 Forms Example 








you submitted value: 
Object {productName: "Blue Widget"} 
> 
Demo Form: with ng-model 


The product name is: Blue Widget 


Product Name 
Blue Widget 


Submit 





图 5-4” 带 ngMode1 的 演示 表单 





很 简单 吧 ! 
5.9 m 
表单 有 很 多 零碎 的 知识 ,但 Angular 让 它 变 得 非常 简明 。 只 要 我 们 掌握 了 如 何 使 用 Formcroup 、 


FormControl 和 Validation ， 它 就 变 得 非常 容易 了 ! 
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6.1 简介 

Angular 有 自己 的 HTTP 库 ， 我 们 可 以 用 它 来 调用 外 部 的 API。 m 

当 应 用 对 外 部 服务 器 发 出 请 求 时 , 我 们 和 希望 用 户 能 继续 与 页 面 进行 交互 。 也 就 是 说 ， 我 们 不 
希望 页 面 在 HTTP 请 求 从 外 部 服务 器 返回 前 一 直 失 去 响应 。 因 此 ， 我 们 的 HTTP 请 求 是 异步 的 。 

一 直 以 来 ， 处 理 异 步 代 码 比 处 理 同 步 代码 更 加 为 手 。 在 JavaScript 中 ， 通 常 有 3 种 处 理 异 步 代 
人 码 的 方式 : 

(1) 回调 C callback ) 

(2) 承诺 ( promise ) 

(3) 可 观察 对 象 ( observable ) 

在 Angular 中 ， 处 理 异 步 代 码 的 最 佳 方式 就 是 使 用 可 观察 对 象 ， 所 以 我 们 会 在 本 章 中 介绍 这 
种 方式 。 














NIS 


关于 RxJS 和 可 观察 对 象 : 本 章 会 涉及 可 观察 对 象 的 使 用 ， 但 不 会 对 其 进行 过 
的 解释 。 第 10 章 会 通过 深入 解析 RxJS 来 讲解 可 观察 对 象 。 

在 本 章 中 ， 我 们 将 : 

(1) 展示 一 个 Http 的 基本 例子 ; 

(2) 创建 一 个 随 敲 随 搜 ( search-as-you-type ) 组 件 用 于 搜索 YouTube; 

(3) 讨论 Http 库 的 API 细 节 。 

O 示例 代码 本 章 所 用 示例 的 完整 代码 可 以 在 示例 代码 下 的 http 文 件 夹 中 找到 。 文 件 
夹 中 包含 一 个 README.md 文 件 ， 其 中 介绍 了 如 何 构建 及 运行 项 目 。 
在 阅读 本 章 时 ， 最 好 尝试 运行 一 下 相关 代码 。 请 随意 尝试 ， 以 深入 了 解 这 些 代 
码 的 工作 原理 。 
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6.2 ”使 用 eangular/http 





HTTP 在 Angular 中 被 拆 分 为 一 个 单独 的 模块 。 这 意味 着 ont 
常量 。 比 如 ,我 们 通常 会 像 下 面 这 样 导 入 @angular/http 中 的 常 


import { Http, Response, RequestOptions, Headers } from 'Gangular/http'; 


从 @angular/http 中 导入 


在 app.ts 代 码 中 ， 我 们 要 导入 HttpModule ， 这 是 一 个 便于 使 用 的 模块 


code/http/app/ts/app.ts 
/* 


* Angular 
*/ 
import { 
Component 
} from 'Gangular/core'; 
import ( NgModule } from 'Gangular/core'; 
import { BrowserModule } from 'Gangular/platform-browser'; 
import { platformBrowserDynamic } from 'Gangular/platform-browser-dynamic'; 
import { HttpModule } from 'Gangular/http'; 


我 们 把 HttpModule 作 为 依赖 项 , 加 入 NgModule 的 imports 列 表 之 中 。 这 样 就 可 以 把 Http ( 和 
另外 一 些 模块 ) RU 


code/http/app/ts/app.ts 


GNgModule(Í( 
declarations: [ 

HttpApp, 
SimpleHTTPComponent, 
MoreHTTPRequests, 
YouTubeSearchComponent, 
SearchBox, 
SearchResultComponent 








pi 
n> 
o 


], 
imports: [ 
BrowserModule, 
HttpModule // «--- right here 
], 
bootstrap: [ HttpApp ], 
providers: [ 
youTubeServiceInjectables 
] 
I» 
class HttpAppModule {} 


现在 就 可 以 把 Http 服 务 注入 到 组 件 中 了 。( 实际 上 也 可 以 用 在 任何 使 用 依赖 注入 的 地 方 。) 
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class MyFooComponent { 
constructor(public http: Http) { 
j 
makeRequest(): void ( 


// do something with this.http ... 


j 
} 


6.3 基本 请 求 


首先 做 的 就 是 向 jsonplaceholder AP 发 起 一 个 简单 的 GET 请 求 。 
我 们 要 做 的 是 : 

(1) 有 一 个 调用 makeRequest 的 button ; 

(2) makeRequest 会 调用 http 库 向 API 发 起 一 个 GET 请 求 ; 

(3) 当 请 求 返 回 时 ,使 用 返回 结果 中 的 数据 更 新 this .data。 

该 示例 的 截图 如 图 6-1 所 示 。 











Basic Request 
Make Request 





{ 
"userId": 1, 
Eddie, 
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", 
"body": "quia et suscipitNnsuscipit recusandae consequuntur expedita et cum Anreprehende 
rit molestiae ut ut quas totamWnnostrum rerum est autem sunt rem eveniet architecto" 


} 














图 6-1 ”基本 请 求 


6.3.1 构建 SimpleHTTPComponent 的 @Component 


首先 要 导入 一 些 模块 ， 然 后 指定 eComponent 的 selector。 


code/http/app/ts/components/SimpleH TTPComponent.ts 
/* 


* Angular 


*/ 





(D http://jsonplaceholder.typicode.com 
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import {Component} from 'Gangular/core'; 
import {Http, Response] from 'éangular/http'; 


GComponent( f 
selector: 'simple-http', 


6.3.2 ”构建 SimpleHTTPComponent 的 template 
然后 构建 视图 。 





code/http/app/ts/components/SimpleHTTPComponent.ts 


template: ^ 

«h2»Basic Request«/h2» 

«button type="button" (click)-2"makeRequest()"»Make Request«/button» 
«div xngIf-"loading"»loading...«/div» 

<pre>{{data | json]]«/pre» 








要 注意 这 里 使 用 了 ngIf 指 令 。 

模板 中 有 三 个 有 趣 的 部 分 : 

(1) button 

(2) 载 人 指示 器 

(3) data 

我 们 将 控制 器 中 的 makeRequest 函数 绑 定 到 button 的 (click) 上 , 稍 后 会 对 这 个 函数 进行 定义 。 

我 们 要 向 用 户 说 明 请 求 正在 处 理 中 ， 所 以 需要 在 变量 10ading 为 true 的 时 候 , 使 用 ngIf 来 显 
示 loading...。 

data 是 一 个 0bject。 这 里 使 用 了 json 管 道 , 这 是 一 种 非常 棒 的 输出 调试 方式 。 把 这 段 代 码 放 
进 pre 标 签 内 就 可 以 获得 漂亮 、 易 读 的 格式 。 




















6.3.8 构建 SimpleHTTPComponent 控制 器 


我 们 先 为 SimpleHTTPComponent 定 义 一 个 新 的 class。 


code/http/app/ts/components/SimpleHTTPComponent.ts 
export class SimpleHTTPComponent { 
data: Object; 
loading: boolean; 
现在 ,我 们 已 经 有 了 data 和 1oading 这 两 个 实例 变量 。 它 们 将 分 别 用 来 存储 API 返 回 的 数据 
值 与 表示 加 载 状 态 。 
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然后 定义 constructor。 


code/http/app/ts/components/SimpleH TTPComponent.ts 


constructor(private http: Http) { 
} 


constructor 的 方法 体 是 空 的 ， 我们 要 注入 一 个 关键 模块 Http。 








Qs 需要 记 住 , 当 我 们 在 public http: Http 中 使 用 public 关 键 字 的 时 候 , TypeScript 
会 将 http 赋 值 给 this.http。 它 是 下 面 这 种 写法 的 简写 : 


// other instance variables here 
http: Http; 


constructor(http: Http) { 
this.http - http; 
j 





现在 ， 我 们 就 通过 实现 makeRequest 函数 来 发 起 第 一 个 HTTP 请 求 。 


code/http/app/ts/components/SimpleH TTPComponent.ts 


makeRequest(): void { 
this.loading - true; 
this.http.request('http://jsonplaceholder.typicode.com/posts/1 ' ) 
.subscribe((res: Response) => { 
this.data - res.json(); 
this.loading - false; 
; 
j 


当 我 们 调用 makeRequest 时 ， 首 先 要 设置 this.1oading = true。 这 会 在 页 面 上 显示 载 人 指 
ZI o 


发 起 HTTP 请 求 的 方式 非常 简明 : 调用 this .http.request 并 传人 URL 作 为 GET 请 求 的 参数 。 


http request 会 返回 一 个 observable 对 象 。 我 们 可 以 使 用 subscribe 订 阅 变 化 (类似 于 在 一 
个 promise 上 使 用 then )。 











code/http/app/ts/components/SimpleH TTPComponent.ts 


this.http.request('http://jsonplaceholder.typicode.com/posts/1 ' ) 
.subscribe((res: Response) => ( 


当 http.request ( 从 服务 器 ) 返回 一 个 流 时 ， 它 就 会 发 出 一 个 Response 对 象 。 我 们 用 json 
a N 然后 将 这 个 Object 赋值 给 this.data。 


只 要 我 们 得 到 了 响应 ,就 不 会 再 加 载 任何 东西 了 ,所 以 这 里 需要 设置 this.1loading = false. 
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Qs .subscribe 同 样 可 以 处 理 失 败 和 流 完 结 的 情况 ， 只 要 分 别 在 第 二 和 第 三 个 参数 
中 传 入 一 个 函数 就 可 以 了 。 对 于 一 个 产品 级 应 用 来 说 ， 处 理 这 两 种 情况 是 个 好 
主意 。 当 请 求 失败 ( 即 流 中 发 生 错 误 ) 的 时 候 ，this.1loading 也 应 当 被 设置 为 


false。 


6.3.4 完整 的 SimpleHTTPComponent 
下 面 就 是 完整 的 SimpleHTTPComponent 。 


code/http/app/ts/components/SimpleH TTP Component.ts 
/* 
* Angular 
*/ 
import {Component} from 'Gangular/core'; 
import {Http, Response] from 'Gangular/http'; 


GComponent ( { 
selector: 'simple-http', 
template: ^ 
«h2»Basic Request«/h2» 
«button type="button" (click)-2"makeRequest()"»Make Request«/button» 
«div xngIf-"loading"»loading...«/div» 
<pre>{{data | json]]«/pre» 

I» 

export class SimpleHTTPComponent { 
data: Object; 
loading: boolean; 


constructor(private http: Http) { 
j 


makeRequest(): void { 
this.loading - true; 
this.http.request( 'http://jsonplaceholder.typicode.com/posts/1 ' ) 
.subscribe((res: Response) => { 
this.data = res. json(); 
this.loading - false; 


}); 


6.4 编写 YouTubeSearchComponent 




















上 一 个 例子 是 从 代码 中 获取 API 服 务 器 上 数据 的 最 简 方式 。 现 在 我 们 要 尝试 构建 一 个 更 复杂 
的 例子 。 
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在 这 一 节 里 ， 我 们 会 打造 一 个 随 着 输入 搜索 YouTube 的 组 件 。 当 搜索 结果 返回 时 ， 通 过 一 个 
列表 来 展示 每 一 个 视频 的 缩 略 图 、 描 述 和 链接 。 


搜索 cats playing ipads 时 的 屏幕 截图 如 图 6-2 所 示 。 





YouTube Search 


cats playing ipads| 








| 荆 
Funny Cats Playing Animals Playing On Cute cats try to Charlie The Cat - 
On iPads iPads Compilation catch a mouse from Kitten Playing iPad 2 
Compilation - Funny You may or may not be surprised, an IPad !! Game For Cats 
Videos 2015 but there are many animals playing Cute cats try to catch a mouse from Cute Funny Clever 
You may or may not be surprised, eea RARIOR LUNO an IPad. Pets Bloopers 
but there are many animals playing http//www.facebook.com/Compilariz Watch HELLO REDDIT, Thanks for the 
on tablet computer. New video funny No... support! More Charlie the Cat Videos 
2015 Thanks for watching, rating the 


- http://youtu.be/xZHwYNrfWdO 
Check My Other Videos Kitten 
HArlem Shake ... 


video and ... Watch 


Watch 


Watch 





Cats playing "Game White Tiger Plays Cat Plays with iPad - Cute Cat plays on 
for Cats" with Apple iPad - Game for Cats Friskies Games for iPad 

iPad Gone Wild! Lions, Cats Cute Cat plays on iPad. 

Two Siberian cats like to play "Game servals, and more! Mr. Kitty playing Cat Fishing on my 


for Cats" with Apple iPad :) Note that girlfriends 1st gen iPad, via Friskies sd 


the iPad has Invisible Shield screen ind Games for Cats 
protector. Siperiankissat leikkivät ii http://Www.gamesforcats.com. 


图 6-2 ”能 让 我 的 猫咪 写 Angular 吗 
在 这 个 例子 中 ， 我 们 要 实现 下 列 功能 : 
(1) 一 个 SearchResult 对 象 ， 用 于 存放 每 条 搜索 结 
(2) 一 个 YouTubeService 服 务 ， 用 于 管理 向 YouTube 的 API 发 出 的 请 求 并 将 结果 转 成 一 个 


SearchResult[] 流 ; 
(3) 一 个 SearchBox 组 件 ， 用 于 根据 用 户 输 入 内 容 调 用 YouTube 服 务 ; 
(4) 一 个 SearchResultComponent 组 件 ， 用 于 泻 染 具 体 的 SearchResult 结 果 ; 
(5) 一 个 YouTubeSearchComponent 组 件 ， 封 装 整 个 YouTube 搜 索 功 能 并 演 染 结果 列表 。 
下 面 逐 一 处 理 每 个 部 分 。 


http://www.ipadgameforcats.com 
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o Patrick Stapleton 维 护 着 一 个 非常 棒 的 代码 仓库 angular2-webpack-starter o 里面 有 
使 用 RxJS 实 现 搜索 GitHub 仓 库 时 自动 补 全 的 示例 。 本 节 中 的 一 些 想 法 就 是 受 这 
个 示例 的 启发 。 它 是 个 包含 各 种 示例 的 酷 炫 项 目 ， 也 许 你 该 看 一 下 。 


6.4.1 编写 SearchResult 


我 们 先 从 编写 一 个 基本 的 SearchResult 类 开始 。 这 个 类 为 我 们 存储 搜索 结果 中 一 些 感 兴趣 
的 字段 提供 了 一 种 便捷 的 方式 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 

















class SearchResult { 
id: string; 
title: string; 
description: string; 
thumbnailUrl: string; 
videoUrl: string; 


constructor(obj?: any) 
this.id 
this.title 
this.description 
this.thumbnailUrl 
this.videoUrl 


obj && obj.id || null; 

obj && obj.title || null; 

obj && obj.description || null; 

obj && obj.thumbnailUrl || null; 

obj && obj.videoUrl I| 
^https://www.youtube.com/watch?v-$[this.id]'^; 


Ho oH H H dg ce 


} 
} 


这 里 使 用 obj?: any 方 式 来 模拟 关键 词 参数 。 我 们 可 以 创建 一 个 新 的 SearchResult 并 且 只 传 
入 一 个 包含 指定 键 的 对 象 。 

唯一 要 特别 指出 的 是 , 我 们 在 构造 videoUr1 时 使 用 了 硬 编码 的 URL 格 式 。 你 也 可 以 将 其 重 构 
为 一 个 根据 多 个 参数 来 生成 路 径 的 函数 ， 或 者 直接 在 视图 中 使 用 视频 的 id 来 构造 URL。 


























6.4.2 ”编写 YouTubeService 


1. API 
在 这 个 例子 中 ， 我 们 将 使 用 YouTube 第 3 版 搜索 APT 。 





(D https://github.com/angular-class/angular2-webpack-starter 
(2 https:;//developers.google.com/youtube/v3/docs/search/list 
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o 为 了 使 用 这 个 API， 你 需要 一 个 API 密 钥 。 我 们 已 经 在 示例 代码 中 包含 了 一 个 

可 供 大 家 使 用 的 API 密 钥 。 尽 管 如 此 ， 当 你 读 到 这 里 的 时 候 ， 可 外 gE 发 现 这 个 密 

铀 已 经 超过 了 使 用 频率 限制 。 如 果 是 这 样 的 话 ， 你 就 需要 去 生成 一 个 自己 的 
密 钥 了 。 

要 生成 自己 的 密 钥 ,可 以 查看 文档 : https://developers.google.com/youtube/registe 

ring an application#Create API Keys。 为 了 简单 起 见 ， 我 已 经 注册 了 一 个 服务 

器 密 钥 ; 如 果 你 要 将 你 的 JavaScript 代 码 放 到 线 上 , 那么 还 需要 一 个 浏览 器 密 钥 。 





我 们 将 为 YouTubeService 设 置 两 个 用 来 表示 API 密 钥 和 API URL 的 常量 


let YOUTUBE API KEY: string = "XXX YOUR KEY HERE XXX"; 
let YOUTUBE API URL: string = "https://www.googleapis.com/youtube/v3/search"; 


最 后 , 还 要 测试 一 下 应 用 。 我 们 并 不 希望 在 产品 环境 下 进行 测试 ,而 是 希望 测试 预 生产 或 开 
发 阶段 的 API。 


为 了 解决 这 个 环境 配置 问题 ， 我 们 就 要 让 这 些 常 量 可 被 注入 。 
文 些 常 


为 什么 要 注 人 这 些 常量 ， 而 不 是 像 平 常 那样 直接 使 用 呢 ? 这 是 因为 只 要 让 这 些 常 量 可 被 注 
我 们 就 能 : 


(1) 让 代码 在 部 署 的 时 候 根 据 所 选 环境 注 人 正确 的 常量 ; 

(2) 在 测试 期 更 容易 替换 要 注 人 的 值 。 

通过 注入 这 些 值 ， 我 们 将 获得 更 多 的 灵活 性 。 

为 了 让 这 些 值 可 被 注入 ， 我 们 使 用 { provide: ... , useValue: ... ]} 请 法 。 


code/http/app/ts/components/YouTubeSearch Component.ts 



































Z 





export var youTubeServiceInjectables: Array«any» = [ 
{provide: YouTubeService, useClass: YouTubeService}, 
{provide: YOUTUBE_API_KEY, useValue: YOUTUBE_API_KEY}, 
{provide: YOUTUBE_API_URL, useValue: YOUTUBE_API_URL} 


| 
这 里 我 们 指定 ， 要 把 YouTuBE_API_KEY 的 值 绑 定 到 可 被 注入 的 YoOuTuBE_API_KEY 上 。 
(YOUTUBE_API_URL 也 一 样 ， 稍 后 还 们 还 将 定义 YouTubeService 。) 


也 许 你 还 记得 , 为 了 在 本 应 用 中 进行 依赖 注入 , 我 们 需要 将 其 放 人 NgModule 的 providers 里 。 
因为 这 us E 所 以 就 能 在 app.ts 中 使 用 它 了 。 
// http/app.ts 


import { HttpModule } from 'Gangular/http'; 
import { youTubeServiceInjectables } from "components/YouTubeSearchComponent" ; 




















A soit 
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// further down 
LY rias 


@NgModule({ 
declarations: [ 
HttpApp, 
// others .... 
], 
imports: [ BrowserModule, HttpModule ], 
bootstrap: [ HttpApp ], 
providers: [ 
youTubeServiceInjectables // «--- right here 
] 
}) 
class HttpAppModule {} 


现在 我 们 使 用 注入 (来自 youTubeServiceInjectables 的 ) YOUTUBE_API_KEY 的 方式 来 代替 
直接 使 用 变量 。 


2. YouTubeService 构 造 函 数 
我 们 通过 编写 一 个 class 并 使 用 @Injectable 对 其 进行 注解 来 创建 YouTubeService。 















































code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* YouTubeService connects to the YouTube API 
* See: x https://developers.google.com/youtube/v3/docs/search/list 
*/ 
GInjectable() 
export class YouTubeService { 
constructor(private http: Http, 
GInject(YOUTUBE API KEY) private apiKey: string, 
GInject(YOUTUBE API URL) private apiUrl: string) ( 
j 


我 们 在 constructor 中 注入 三 样 东 西 : 


(1) Http 





(2) YOUTUBE. API. KEY 
(3) YOUTUBE. API. URL 


这 里 要 注意 ,我们 使 用 这 三 个 参数 创建 实例 变量 。 这 意味 着 可 以 分 别 通过 this .http 、 
this.apiKey 和 this.apiUr1l 来 访问 它们 。 











还 要 注意 ， 我 们 使 用 eInject(YOUTUBE_API_KEY) 进 行 显 式 注 入 。 
3. YouTubeService 搜 索 


下 一 步 ， 我 们 来 实现 search 图 数 。search 传 人 一 个 要 查询 的 string 并 返回 一 个 会 发 出 
SearchResult[] 流 的 0bservable。 换 句 话 说， 它 发 出 的 每 个 条 目 都 是 一 个 SearchResult 数 组 。 
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code/http/app/ts/components/YouTubeSearch Component.ts 


search(query: string): Observable«SearchResult[]» { 
let params: string - [ 
`q=${query}`, 
`key=${this.apiKey}`, 
`part=snippet`, 
^type-video', 
^maxResults-10^ 
]-join('&'); 
let queryUrl: string = ^$[this.apiUrl]?$[(params]'; 


这 里 使 用 了 手动 的 方式 来 构造 queryUr1。 我 们 简单 地 将 查询 参数 放 和 人 params 变 量 之 中 。( 你 
可 以 查阅 搜索 API 文 档 ?" 了 解 每 个 值 的 含义 。) 


然后 将 apiUr1 与 params 拼 接 起 来 作为 queryUr1。 
现在 就 有 了 一 个 可 以 用 来 发 起 请 求 的 queryuUrl1 了 。 








code/http/app/ts/components/YouTubeSearch Component.ts 


search(query: string): Observable«SearchResult[]» { 
let params: string - [ 
`q=${query}`, 
`key=${this.apiKey}`, 
`part=snippet`, 
^type-video', 
^maxResults-10" 
]-join('&'); 
let queryUrl: string = ^$[this.apiUrl]?$(params]'; 
return this.http.get(queryUrl) 
.map((response: Response) => ( 
return («any»response.json()).items.map(item => { 
// console.log("raw item", item); // uncomment if you want to debug 
return new SearchResult((í 
id: item.id.videoId, 
title: item.snippet.title, 
description: item.snippet.description, 
thumbnailUrl: item.snippet.thumbnails.high.url 
DE 
D); 
2); 
} 


我 们 要 获取 http.get 的 返回 值 ， 并 用 map 来 从 请 求 中 获取 Response 。 这 里 使 用 . json() 从 
response 中 提取 返回 体 并 同时 实例 化 成 一 个 对 象 。 然 后 遍历 每 一 个 项 目 并 将 其 转换 成 一 个 


SearchResult,; 











(D https:;//developers.google.com/youtube/v3/docs/search/list 
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Q、 
A 


如 果 你 想 看 看 item 的 原始 值 ， 可 以 取消 对 console.10g 的 注释 ， 然 后 在 浏览 器 
的 开发 者 控制 台 检 查 输出 的 值 。 


注意 , 这 里 调用 了 (xany>response.json()).items。 这 是 在 干什么 ? 这 是 在 告 
诉 TypeScript， 我 们 并 不 想 在 这 里 进行 严格 的 类 型 检查 。 

当 我 们 使 用 JSON API 时 ， 通 常 并 没有 API 响 应 体 的 类 型 定义 信息 ， 所 以 
TypeScript 不 知道 返回 的 Object 中 会 有 一 个 items 键 。 因 此 ， 编 译 器 会 在 这 里 出 
问题 。 

我 们 也 可 以 调用 response. json()["items"] 并 将 其 转换 成 一 个 Array 类 型 ,但 
是 这 里 (以 及 创建 SearchResult 时 ) 将 其 作为 any 类 型 来 使 用 会 更 加 简洁 ， 只 
是 牺牲 了 一 点 类 型 检查 的 严格 性 。 


4.YouTubeService 的 完整 代码 





这 里 是 YouTubeService 的 完整 代码 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 


* YouTubeSearchComponent is a tiny app that will autocomplete search YouTube. 


*/ 


import { 
Component, 
Injectable, 
OnInit, 
ElementRef, 
EventEmitter, 
Inject 
) from 'Gangular/core'; 
import ( Http, Response } from 'Gangular/http'; 
import { Observable } from 'rxjs'; 


/* 


This API key may or may not work for you. Your best bet is to issue your own 
API key by following these instructions: 
https://developers.google.com/youtube/registering_an_application#Create_API_Ke\ 


ys 
Here 


Note 
your 


*/ 


I've used a **Server key** and make sure you enable YouTube. 


that if you do use this API key, it will only work if the URL in 
browser is "localhost" 


export var YOUTUBE API KEY: string = 'AIzaSyDOfT BO841aEZScosfTYMruJobmp jqNeEk'; 


export var YOUTUBE API URL: string 


ch'; 


, 


'https://www.googleapis.com/youtube/v3/searN 
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let loadingGif: string = ((«any»window).. karma  .) ? '' : require('images/loadin\ 
g.gif'); 


class SearchResult { 
id: string; 
title: string; 
description: string; 
thumbnailUrl: string; 
videoUrl: string; 


constructor(obj?: any) { 


this.id - obj && obj.id || null; 
this.title - obj && obj.title |] null; 
this.description - obj && obj.description || null; 
this.thumbnailUrl - obj && obj.thumbnailUrl || null; 
this.videoUrl - obj && obj.videoUrl E 


"https: //www.youtube.com/watch?v-$[this.id])'^; 





/** 
* YouTubeService connects to the YouTube API 
* See: x https://developers.google.com/youtube/v3/docs/search/list 
*/ 
GInjectable() 
export class YouTubeService { 
constructor(private http: Http, 
GInject(YOUTUBE API KEY) private apiKey: string, 
GInject(YOUTUBE API URL) private apiUrl: string) { 


】 


search(query: string): Observable«SearchResult[]» { 
let params: string - [ 
`q=${query}`, 
`key=${this.apiKey}`, 
`part=snippet`, 
^type-video', 
^maxResults-10" 
]-join('&'); 
let queryUrl: string = ^$[this.apiUrl]?$[([params]'; 
return this.http.get(queryUrl) 
.map((response: Response) => ( 
return («any»response.json()).items.map(item => { 
// console.log("raw item", item); // uncomment if you want to debug 
return new SearchResult((í 
id: item.id.videoId, 
title: item.snippet.title, 
description: item.snippet.description, 
thumbnailUrl: item.snippet.thumbnails.high.url 
D); 
F); 
; 
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export var youTubeServiceInjectables: Array«any» = [ 
{provide: YouTubeService, useClass: YouTubeService], 
Íprovide: YOUTUBE API KEY, useValue: YOUTUBE API KEY], 
{provide: YOUTUBE API URL, useValue: YOUTUBE API URL] 
]; 


/** 
* SearchBox displays the search box and emits events based on the results 


*/ 


@Component( { 
outputs: ['loading', 'results'], 
selector: 'search-box', 
template: ^ 


«input type="text" class-"form-control" placeholder-"Search" autofocus» 


}) 
export class SearchBox implements OnInit { 
loading: EventEmitter«boolean» = new EventEmitter«boolean»(); 
results: EventEmitter«SearchResult[]» = new EventEmitter«SearchResult[]»(); 


constructor(private youtube: YouTubeService, 
private el: ElementRef) { 
j 


ngOnInit(): void { 
// convert the `keyup event into an observable stream 
Observable.fromEvent(this.el.nativeElement, 'keyup') 
.map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length > 1) // filter out if empty 
. debounceTime(250) // only once every 250ms 
.do(() => this.loading.next(true)) // enable loading 
// search, discarding old events if new input comes in 
.map((query: string) => this.youtube.search(query)) 
.switch() 
// act on the return of the search 
.subscribe( 
(results: SearchResult[]) => { // on sucesss 
this.loading.next(false); 
this.results.next(results); 
i 
(err: any) => { // on error 
console.log(err); 
this.loading.next(false); 
), 
() => ( // on completion 
this.loading.next(false); 
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GComponent ( f 
inputs: ['result'], 
selector: 'search-result', 
template: ^ 


«div class-"col-sm-6 col-md-3"» 
«div class-z"thumbnail"» 
«img src-"[íresult.thumbnailUrl]]"» 
«div classz"caption"» 
«h3»(fresult.title]]«/h3» 
<p> ((result.description]]«/p» 
<p><a hrefz"([result.videoUrl]]" 
class="btn btn-default" role-"button"» 
Watch«/a»«/p» 
«/div» 
«/div» 
«/div» 


D) 


export class SearchResultComponent { 
result: SearchResult; 


} 





@Component( f 
selector: 'youtube-search', 
template: 
«div Class='container > 
«div class="page-header"> 
<h1>YouTube Search 
«img 
style-"float: right;" 
*nglIfz"loading" 
src-'$[loadingGif]' /> 
«/h1» 
«/div» 


«div class="row"> 
«div class-"input-group input-group-1g col-md-12"» 
«search-box 
(1oading)-"loading = $event" 
(results)-"updateResults($event)" 
»«/search-box» 
«/div» 
«/div» 


«div class="row"> 
«search-result 
*xngFor-"let result of results" 
[result]-"result"» 
«/search-result» 
«/div» 
«/div» 


D) 


export class YouTubeSearchComponent { 
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results: SearchResult[]; 


updateResults(results: SearchResult[]): void { 
this.results - results; 
// console.log("results:", this.results); // uncomment to take a look 


} 
} 


6.4.3 编写 SearchBox 





SearchBox 组 件 在 应 用 中 扮演 着 关键 的 角色 : 它 是 UI 与 YouTubeService 的 中 间 连 接 层 。 
SearchBox 将 会 : 

(1) 观察 input 的 keyup 事 件 ， 并 向 YouTubeService 提 交 搜 索 ; 

(2) 在 正在 加 载 (或 者 不 再 加 载 ) 时 ， 触 发 一 个 10ading 事 件 ; 

(3) 在 获取 到 新 的 结果 时 ， 触 发 一 个 results 事 件 。 

1. 定义 SearchBox 的 @Component 

我 们 来 定义 SearchBox 的 @Component 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* SearchBox displays the search box and emits events based on the results 
*/ 

@Component( { 
outputs: ['loading', 'results'], 


selector: 'search-box', 
我 们 之 前 已 经 见 过 很 多 次 selector 了 : 它 人 允许 我 们 创建 csearch-boxy> 标签 。 


outputs 指 定 了 将 从 组 件 中 触发 的 事件 ， 也 就 是 可 以 在 视图 中 使 用 (output)="callback()" 
语法 以 侦 听 组 件 中 的 事件 。 例 如 ， 下 面 是 我 们 将 在 视图 中 使 用 search-box 标 签 的 方式 : 
«search-box 
(1oading)-"loading = $event" 


(results)-"updateResults($event)" 
»«/search-box» 














在 这 个 例子 中 ， 当 SearchBox 组 件 触发 一 个 loading 事 件 时 ， 我 们 要 设置 父 上 下 文中 的 
loading 变 量 。 同 样 ， 当 SearchBox 组 件 触 发 results 事 件 时 ， 我们 将 会 调用 父 上 下 文中 的 
updateResults( ) ŽL 








我 们 在 ecomponent 的 配置 当中 简要 地 用 "1oading" 和 "results" 字 符 串 指定 事件 的 名 称 。 在 
这 个 例子 中 ， 每 个 事件 都 会 有 一 个 对 应 的 EventEmitter 作 为 控制 器 类 的 实例 变量 。 稍 后 就 会 实 
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现 它们 。 


目前 ， 要 记 住 ecomponent 就 像 是 组 件 的 公共 API， 所 以 这 里 只 需要 指定 事件 的 名 称 ， 稍 后 再 
来 看 EventEmitter 的 具体 实现 。 





2. m 
我 们 的 template 很 简明 。 这 里 只 有 一 个 input 标签 。 


code/http/app/ts/components/YouTubeSearch Component.ts 


/** 
* SearchBox displays the search box and emits events based on the results 


*/ 


@Component( { 
outputs: ['loading', 'results'], 
selector: 'search-box', 
template: ^ 
«input type="text" class-"form-control" placeholder-"Search" autofocus» 


D) 





3. 定义 SearchBox 控 制 器 


SearchBox 控 制 絮 是 一 个 新 类 。 





code/http/app/ts/components/YouTubeSearchComponent.ts 


export class SearchBox implements OnInit { 
loading: EventEmitter«boolean» - new EventEmitter«boolean»(); 
results: EventEmitter«SearchResult[]» - new EventEmitter«SearchResult[]»(); 


我 们 通过 implements OnInit 让 这 个 类 实现 对 应 的 接口 ， 这 么 做 是 因为 需要 使 用 生命 周期 中 
ngonInit 的 回调 。 如 果 一 个 pus de 3I A ngonInitPbNR 函数 会 在 首次 变化 检查 后 
调用 。 

ngonInit 是 进行 初始 化 工作 的 理想 地 方 ( 相对 于 constructor )， 因 为 组 件 的 各 个 输入 参数 
在 constructor 中 仍然 是 不 可 用 的 。 


e 定义 SearchBox 控 制 器 的 constructor 


我 们 来 看 一 下 SearchBox 的 constructor 。 











code/http/app/ts/components/YouTubeSearchComponent.ts 


constructor(private youtube: YouTubeService, 
private el: ElementRef) { 
} 


我 们 在 constructor 中 注入 : 


(1) YouTubeService 
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(2) 此 组 件 所 附着 的 元 素 el 


其 中 的 el 是 一 个 ElementRef 类 型 的 对 象 ， 此 类 型 是 Angular 对 原生 元 素 的 一 个 包装 。 
我 们 将 注入 的 两 个 值 作为 实例 变量 。 


e 定义 SearchBox 控 制 器 ngOnInit 




















在 输入 框 中 ,我 们 想 要 监视 keyup 事 件 。 问 题 是 ， 如 果 在 每 一 次 keyup 后 都 直接 进行 搜索 ， 
可 能 效果 并 不 好 。 我 们 可 以 用 三 种 方式 来 提升 用 户 体验 : 


(1) 过 滤 掉 空白 与 过 短 的 查询 ; 


(2) 消除 输入 的 “ 拌 动 ”"， 也 就 是 我 们 不 希望 每 一 个 字符 发 生 改 变 时 都 进行 搜索 ， 而 是 在 用 户 
完成 输入 并 暂停 一 小 段 时 间 后 再 进行 搜索 ; 


(3) 当 用 户 进行 新 的 搜索 时 ， 抛 弃 旧 的 搜索 内 容 。 
我 们 可 以 手动 绑 定 keyup ， 并 在 每 次 keyup 事 件 触发 时 调用 一 个 函数 ， 然 后 在 其 中 实现 字符 
过 滤 与 抖动 消除 。 不 过 我 们 有 一 种 更 好 的 方式 : 让 keyup 事 件 成 为 一 个 可 观察 流 。 


RxJS 提 供 了 一 种 使 用 Rx.0bservable. fromEvent 的 方式 来 监听 一 个 元 素 上 的 事件 。 我 们 可 以 
像 下 面 这 样 使 用 它 。 























code/http/app/ts/components/YouTubeSearchComponent.ts 
ngOnInit(): void { 
// convert the `keyup event into an observable stream 
Observable.fromEvent(this.el.nativeElement, 'keyup') 
要 注意 在 fromEvent 里 面 : 
a 第 一 个 参数 是 this .el .nativeElement ( 组件 附着 的 原生 DOM 元 素 ); 
口 第 二 个 参数 是 字符 串 'keyup' ， 代 表 的 是 将 要 被 转换 成 流 的 事件 名 称 。 
借助 流 的 魔力 ， 我 们 可 以 把 它 转换 成 SearchResult。 下 面 来 分 步 看 看 。 
有 了 keyup 事 件 的 流 ， 就 能 把 多 个 方法 串联 起 来 。 接 下 来 我 们 会 在 流 上 串联 一 些 转换 流 的 函 
数 ， 并 在 最 后 展示 整个 示例 。 
首先 ， 我们 要 从 input 标 签 中 提取 输入 值 : 


.map((e: any) => e.target.value) // extract the value of the input 


















































上 面 的 代码 表示 ， 上 映射 每 一 个 keyup 事 件 ， 然 后 找到 它 的 目标 (e.target, ， 也 就 是 input 元 
素 ) 并 取出 value。 这 意味 着 这 个 流 现在 变 成 了 一 个 字符 串 流 。 
下 一 步 : 


.filter((text: string) => text.length > 1) 
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filter 表 示 该 流 在 长 度 小 于 1 的 时 候 不 会 发 送 任何 搜索 字符 串 。 如 果 你 还 希望 忽略 较 短 的 搜 
索 字 符 串 ， 可 以 把 这 个 值 改 大 一 点 。 


.debounceTime(250) 


debounceTime 表 示 我 们 会 忽略 触发 间隔 小 于 250 ms 的 请 求 。 也 就 是 说 , 我 们 不 会 去 搜索 每 一 
次 键入 的 内 容 。 只 有 在 用 户 和 暂停 输入 一 人 小段 时 间 后 才 会 触发 搜索 。 

.do(() => this.loading.next(true)) // enable loading 

在 流 上 使 用 do 方 法 可 以 在 流 中 对 每 个 事件 执行 函数 ， 但 是 这 种 方式 不 会 改变 流 中 的 任何 数 
据 。 这 是 因为 已 经 获取 到 了 有 具有 足够 长 度 并 消除 了 输入 拌 动 的 搜索 字符 串 , 所 以 要 在 页 面 上 显示 
loading。 

this.1oading 是 一 个 EventEmitter。 我 们 通过 发 射 true 作 为 下 一 个 事件 来 “开启 ”1oading。 
我 们 通过 调用 next 来 在 EventEmitter 上 发 射 数据 。 编 写 的 this.1oading.next(true) 代 表 在 
loading 这 个 EventEmitter 上 发 射 一 个 true 事 件 。 当 监听 此 组 件 上 的 loading 事 件 时 ，$event 的 
值 现 在 会 被 设置 为 true ( 稍 后 会 深入 探讨 使 用 $event ). 


.map((query: string) => this.youtube.search(query)) 
.switch() 


在 每 一 个 触发 的 查询 上 使 用 .map 以 执行 搜索 。 使 用 switch 表 示 “ 除 了 最 近 的 一 次 ， 忽 略 所 
有 搜索 事件 ”。 这 就 是 说 ,如 果 有 一 个 新 的 搜索 进来 , 我 们 就 使 用 这 个 最 新 的 并 丢弃 掉 其 他 搜索 。 







































































e» 熟悉 Reactive 的 专家 对 此 一 定 不 会 陌生 。 你 也 可 以 在 RxJS 的 文档 "中 找到 关于 
switch 方 法 的 更 加 具体 的 定义 。 





每 当 进 入 query 时 ， 都 将 对 YouTubeService 进 行 一 次 搜索 (search )。 
把 这 些 串 联 在 一 起 ， 结 果 如 下 所 示 。 


code/http/app/ts/components/YouTubeSearch Component.ts 











ngOnInit(): void { 
// convert the ^keyup? event into an observable stream 
Observable.fromEvent(this.el.nativeElement, 'keyup') 
.map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length > 1) // filter out if empty 
. debounceTime(250) // only once every 250ms 
.do(() => this.loading.next(true)) // enable loading 
// search, discarding old events if new input comes in 
.map((query: string) -» this.youtube.search(query)) 
.switch() 
// act on the return of the search 
.subscribe( 





(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/switch.md 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 





144 第 6 章 HTTP 








因为 RxJS 的 API 数 量 众多 ， 所 以 看 起 来 会 有 些 吓人 。 尽 管 如 此 ， 我 们 使 用 简单 的 几 行 代码 就 
实现 了 一 个 极为 复杂 的 事件 处 理 流 ! 


因为 是 在 调用 YouTubeService ， 所 以 我 们 的 流 现在 是 一 个 SearchResult[] 流 了 。 这 时 可 以 
订阅 (subscribe) 这 个 流 ， 并 执行 相应 的 操作 。 


subscribe 接 收 三 个 参数 : onSuccess, onErrorjfllonCompletion 




















code/http/app/ts/components/YouTubeSearchComponent.ts 


.subscribe( 

(results: SearchResult[]) => { // on sucesss 
this.loading.next(false); 
this.results.next(results); 

) 

(err: any) => { // on error 
console.log(err); 
this.loading.next(false); 

}, 


() => { // on completion 
this.loading.next(false); 
} 
} 
第 一 个 参数 指定 了 当 流 触发 一 个 正常 事件 时 将 会 执行 的 操作 。 这 里 我 们 会 在 这 两 个 
EventEmitter 上 触发 一 个 事件 : 
(1) 调用 this. loading.next(false)， 表 示 停 止 加 载 ; 
(2) 调用 this.results.next(results) ， 会 触发 一 个 包含 结果 列表 数据 的 事件 。 
第 二 个 参数 指定 了 当 流 出 现 错误 时 将 会 执行 的 操作 。 这 里 我 们 只 设置 this.loading. 
next(false) 并 记录 下 错误 。 
第 三 个 参数 指定 了 当 流 结束 时 将 会 执行 的 操作 。 这 里 依然 会 触发 结束 加 载 的 事件 。 
4. SearchBox 组 件 的 完整 代码 
以 下 是 SearchBox 组 件 的 完整 代码 。 


























code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* SearchBox displays the search box and emits events based on the results 
*/ 
@Component( { 
outputs: ['loading', 'results'], 
selector: 'search-box', 
template: ` 
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«input type="text" class-"form-control" placeholder-"Search" autofocus» 


}) 
export class SearchBox implements OnInit { 
loading: EventEmitter«boolean» = new EventEmitter«boolean»(); 
results: EventEmitter«SearchResult[]» = new EventEmitter«SearchResult[]»(); 


constructor(private youtube: YouTubeService, 
private el: ElementRef) { 


j 


ngOnInit(): void { 
// convert the ^keyup? event into an observable stream 
Observable.fromEvent(this.el.nativeElement, 'keyup') 
.map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length > 1) // filter out if empty 
.debounceTime(250) // only once every 250ms 
.do(() => this.loading.next(true)) // enable loading 
// search, discarding old events if new input comes in 
.map((query: string) => this.youtube.search(query)) 
.switch() 
// act on the return of the search 
.subscribe( 
(results: SearchResult[]) => ( // on sucesss 
this.loading.next(false); 
this.results.next(results); 








), 

(err: any) => ( // on error 
console.log(err); 
this.loading.next(false); 


Jo 
() 2» ( // on completion 
this.loading.next(false); 


6.4.4 编写 SearchResultComponent 


之 前 的 SearchBox 相 当 复 杂 。 现在 来 处 理 一 个 简单 得 多 的 组 件 : SearechResultComponent ( 如 
图 6-3 所 示 )。SearchResultComponent 的 作用 就 是 泻 染 一 个 SearchResult。 
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Charlie The Cat - 
Kitten Playing iPad 2 
!!! Game For Cats 
Cute Funny Clever 
Pets Bloopers 


HELLO REDDIT, Thanks for the 
support! More Charlie the Cat Videos 
- http;//youtu.be/xZHwYNrfWdO 
Check My Other Videos Kitten 
HArlem Shake ... 


Watch 





图 6-3 ”单一 搜索 结果 组 件 
这 里 没有 什么 新 东西 ， 所 以 直接 完整 地 列 出 来 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 











GComponent( f 
inputs: ['result'], 
selector: 'search-result', 
template: ^ 


«div class-"col-sm-6 col-md-3"» 
«div class-"thumbnail"» 
«img src-"[íresult.thumbnailUrl]]"» 
«div classz'"caption"» 
«h3» ( (result.title]])«/h3» 
«p» ((result.description]]«/p» 
<p><a hrefz"((result.videoUrl]]" 
class="btn btn-default" role="button"> 
Watch«/a»«/p» 
«/div» 
«/div» 
«/div» 


}) 
export class SearchResultComponent { 


result: SearchResult; 


] 
有 以 下 几 点 需要 关注 : 
口 eComponent 只 有 一 个 result 输 入 参数 ， 可 以 通过 它 把 SearchResult 赋 值 给 组 件 ; 


口 template 里 有 标题 、 描 述 以 及 视频 的 缩 略 图 ， 并 通过 一 个 按钮 链接 到 视频 上 ; 
口 SearchResultComponent 在 其 实例 中 使 用 result 变 量 存储 SearchResult。 
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6.4.5 编写 YouTubeSearchComponent 

















我 们 要 实现 的 最 后 一 个 组 件 就 是 YouTubeSearchComponent。 这 个 组 件 最 终 会 将 所 有 东西 组 


1. YouTubeSearchComponent 的 @Component 


code/http/app/ts/components/YouTubeSearchComponent.ts 


@Component({ 
selector: 'youtube-search', 


@Component 注 解 很 容易 理解 . 使 用 名 为 youtube-search 的 selector。 
2. YouTubeSearchComponent 控 制 器 


在 讨论 template 之 前 ， 需 要 先 看 一 下 YouTubeSearchComponent 探 制 器 。 





code/http/app/ts/components/YouTubeSearch Component.ts 


export class YouTubeSearchComponent { 
results: SearchResult[]; 


updateResults(results: SearchResult[]): void { 
this.results - results; 
// console.log("results:", this.results); // uncomment to take a look 
j 
j 


这 个 组 件 拥有 一 个 实例 变量 : SearchResult 数 组 类 型 的 results。 


我 们 还 定义 了 一 个 函数 : updateResults。updateResults 直接 把 SearchResult[] 的 新 值 赋 
给 this,resultss 

















results 和 updateResults 都 会 在 template 中 用 到 。 





3. YouTubeSearchComponent 的 template 
我 们 的 视图 需要 做 三 件 事 : 
(1) 在 加 载 时 ， 显 示 加 载 指示 需 ; 

(2) 监听 search-box 上 的 事件 ; 

(3) 显示 搜索 结果 。 

之 后 来 看 一 人 template。 构 建 基 本 结构 并 在 头 部 的 旁边 显示 表示 “正在 加 载 ”的 gif 动画 。 


T 














code/http/app/ts/components/YouTubeSearch Component.ts 


template: 
«div class-'container'» 
«div class-"page-header"» 
«hi»YouTube Search 
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«img 
style-"float: right;" 
*nglf-"loading" 
src-'$([loadingGif]' /> 
«/h1» 
«/div» 


O 注意 ，img 的 src 属 性 为 ${loadingGif} ，1loadingGif 变 量 来 自 于 程序 前 面 的 
require 语 句 。 这 里 使 用 了 webpack 的 图 像 文件 加 载 功能 。 如 果 你 想 探究 其 工作 
原理 ， 可 以 看 一 下 本 章 示例 代码 中 的 webpack 配 置 ， 或 者 下 载 image-webpack- 
loader 项 目 "。 





因为 只 有 当 loading 为 真 时 ， 才 需要 显示 加 载 图 像 ， 所 以 要 用 ngIf 来 实现 这 个 功能 。 
接 下 来 ， 看 看 使 用 search-box 的 地 方 。 


code/http/app/ts/components/YouTubeSearchComponent.ts 








«div class="row"> 
«div class-"input-group input-group-lg col-md-12"» 
«search-box 
(1oading)-"loading = $event" 
(results)-"updateResults($event)" 
»«/search-box» 
«/div» 


值得 关注 的 是 将 results 输 出 结果 绑 定 到 loading 的 方式 。 注 意 我 们 在 这 里 使 用 了 
(output )="action()" 语 法 。 














对 于 loading 和 输出， 运行 1oading = $event 表 达 式 。$event 会 被 EventEmitter 发 出 的 事件 
值 蔡 换 掉 。 也 就 是 说 ， 当 我 们 调用 SearchBox 组 件 中 的 this.1loading.next(true) 时 ，$event 的 
值 将 会 是 true。 

同样 ， 对 于 results 输 出 ， 每 当 一 组 新 的 结果 发 出 时 ， 都 会 调用 updateResults( ) 函数 。 这 
样 就 能 实现 更 新 组 件 中 results 实 例 变量 值 的 效果 。 

最 后 ， 我 们 要 在 组 件 中 获取 results 列 表 ， 并 为 每 个 组 件 泻 染 一 个 search-result。 









































code/http/app/ts/components/YouTubeSearchComponent.ts 


«div class="row"> 
«search-result 
*xngFor-"let result of results" 
[result]-"result"» 
«/search-result» 
«/div» 
«/div» 





(D https://github.com/tcoopman/image-webpack-loader 
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4. YouTubeSearchComponent 的 完整 代码 





M 


这 里 是 YouTubeSearchComponent 的 完整 代码 。 














code/http/app/ts/components/YouTubeSearchComponent.ts 


@Component( { 
selector: 'youtube-search', 
template: ` 
«div Class='container > 
«div class="page-header "> 
<h1>YouTube Search 
«img 
style-"float: right;" 
xngIf="loading" 
src='${loadingGif}' /> 
«/h1» 
«/div» 





«div class="row"> 
«div class-"input-group input-group-1lg col-md-12"» 
«search-box 
(1oading)-"loading = $event" 
(results)-"updateResults($event)" 
»«/search-box» 
«/div» 
«/div» 


«div class="row"> 
«search-result 
*xngFor-"let result of results" 
[result]-"result"» 
«/search-result» 
«/div» 
«/div» 
}) 
export class YouTubeSearchComponent { 
results: SearchResult[]; 


updateResults(results: SearchResult[]): void { 
this.results - results; 


// console.log("results:", this.results); // uncomment to take a look 


j 
} 


好 了 ! 这 样 我 们 就 实现 了 一 个 针对 YouTube 视 频 的 随 敲 随 搜 功能 ! 如 有 果 你 还 不 太 明白 ， 可 以 
尝试 执行 示例 代码 。 
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6.5 Gangular/http API 


当然 , 到 目前 为 止 发 起 的 所 有 HTTP 请 求 都 是 简单 的 6ET 请 求 。 知晓 如 何 发 起 其 他 类 型 的 请 求 
也 很 重要 。 























6.5.4 发 起 一 个 POST 请 求 

使 用 eangular/http 发 起 POST 请 求 与 发 起 ET 请求 非 常 类 似 ， 仅 仅 多 了 一 个 额外 的 参数 : 请 
求 体 。 

jsonplaceholder API 同 样 提 供 了 一 个 URL， 可 供 测试 PoST 请 求 。 现 在 就 来 试 一 下 。 








code/http/app/ts/components/MoreHTT PRequests.ts 


makePost(): void { 
this.loading - true; 
this.http.post( 
'http://jsonplaceholder.typicode.com/posts', 
JSON.stringify(Í 


body: 'bar', 
title: 'foo', 
userId: 1 


})) 

.subscribe((res: Response) => { 
this.data = res. json(); 
this.loading - false; 

D; 

j 


在 第 二 个 参数 中 ,使 用 JSON.stringify 将 Object 转换 为 一 个 JSON 字 符 串 。 





6.5.2 PUT/PATCH/DELETE/HEAD 
还 有 其 他 一 些 常见 的 HTTP 请 求 ， 也 是 用 类 似 的 方式 进行 调用 。 
































O http.put 和 http.patch 分 别 用 于 PUT 和 PATCH 请 求 ， 并 且 它 们 都 带 有 一 个 URL 和 一 个 请 求 
体 。 

O http.delete 和 http.head 分 别 用 于 DELETE 和 HEAD 请 求 ， 并 且 都 带 有 一 个 URL ( 没有 请 求 
体 )。 


下 面 展示 了 如 何 发 起 一 个 DELETE 请 求 。 


code/http/app/ts/components/MoreHTT PRequests.ts 


makeDelete(): void { 
this.loading - true; 





(D http://jsonplaceholder.typicode.com 
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this.http.delete('http://jsonplaceholder.typicode.com/posts/1') 
.subscribe((res: Response) => { 
this.data - res.json(); 
this.loading - false; 


T) 


6.5.3 RequestOptions 


目前 我 们 覆盖 到 的 所 有 http 方 法 还 带 有 一 个 可 选 的 末 位 参数 : RequestOptions, Request 
Options X RHH T.: 
L] method 


L] headers 
CL] mode 


口 credentials 





0 cache 
ü url 


ü search 


比如 ， 我 们 可 以 用 X-API-TOKEN 这 样 一 个 特殊 的 请 求 头 来 创建 GET 请 求 。 








code/http/app/ts/components/MoreHTTPRequests.ts 


makeHeaders(): void { 
let headers: Headers = new Headers(); 
headers.append('X-API-TOKEN', 'ng-book') 


let opts: RequestOptions - new RequestOptions(); 
opts.headers - headers; 


this.http.get('http://jsonplaceholder.typicode.com/posts/1', opts) 
.subscribe((res: Response) -» ( 


this.data - res.json(); 


J9; 


6.6 总 结 


@angular/http 非 常 灵活 并 且 广 泛 适 用 于 各 种 API。 


@angular/http 的 一 个 强大 特性 就 是 支持 模拟 后 台 。 这 一 点 在 测试 中 非常 有 用 。 想 了 解 更 多 
关于 测试 HTTP 的 内 容 ， 请 参见 第 15 章 。 
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在 Web 开 发 中 ,路 由 是 指 将 应 用 划分 成 多 个 分 区 ,通常 是 按照 从 浏览 器 的 URL 衍 生出 来 的 规 


则 进行 分 割 。 
例如 , 访问 一 个 网 站 的 /路 径 时 , 我 们 有 可 能 正在 访问 该 网 站 的 home 路 由 ; 又 例如 , 访问 /ab 
时 ， 我 们 想 要 泻 染 的 是 关于 页 面 ; 等 等 。 























7.1 为 什么 需要 路 由 


在 应 用 程序 中 定义 路 由 非常 有 用 ， 因 为 我 们 可 以 : 


口 将 应 用 程序 划分 为 多 个 分 区 ; 
口 维护 应 用 程序 的 状态 ; 
口 基于 茶 些 规则 保护 应 用 分 区 。 


假设 我 们 正在 开发 类 似 于 前 面 描述 的 库存 应 用 程序 。 




















out 


第 一 次 访问 该 应 用 程序 时 , 首先 看 到 的 可 能 是 搜索 表单 , 用 来 输入 搜索 关键 词 并 获得 匹配 的 


产品 列表 。 

然后 ， 单 击 某 产 品 可 以 访问 该 产品 的 详细 信息 页 面 。 

因为 我 们 的 应 用 程序 是 客户 端 , 所 以 变换 “页 面 ” 并 不 一 定 要 更 改 URL。 但 是 值得 考量 的 
如 果 为 所 有 页 面 使 用 同样 的 URL， 会 有 什么 后 果 呢 ? 


口 刷新 页 面 后 ， 无 法 保留 你 在 应 用 中 的 位 置 。 

口 不 能 为 页 面 添加 书签 ， 方 便 以 后 返回 相同 的 页 面 。 

口 无 法 与 他 人 分 享 当前 页 面 的 URL。 

反 过 来 看 ， 使 用 路 由 能 让 我 们 定义 URL 字 符 串 ， 指 定 用 户 在 应 用 中 的 位 置 。 

在 库存 的 例子 中 ， 我 们 可 以 为 每 个 任务 定义 一 系列 不 同 的 路 由 配置 ， 如 下 所 示 。 






































H 
JE, 





O 最 初 的 根 UREL 可 能 是 http:/our-app/。 当 访问 该 路 径 时 ， 我 们 可 能 被 重 定向 到 home 路 由 : 
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http:/our-app/home。 
O 当 访 问 “About Us” 区 域 时 ，URL 地 址 可 能 变 为 http:/ourapp/about。 这 样 ， 如 果 我 们 将 
http://our-app/about 发 给 其 他 用 户 ， 他 们 会 看 到 相同 的 页 面 。 





7.2 客户 端 路 由 的 工作 原理 
也 许 你 以 前 曾经 编写 过 服务 端的 路 由 代码 (这 并 不 是 完成 本 章 的 条 件 )。 通 常 ， 在 服务 需 端 
负责 路 由 的 情况 下 ， 收 到 HTTP 请 求 后 ， 服 务 器 会 根据 收 到 的 URL 来 运行 相应 的 控制 器 
例如 ， 在 Express.js" 中 ， 可 以 这 样 实现 : 


var express = require('express' 
var router - express.Router(); 





























// define the about route 
router.get('/about', function(req, res) ( 
res.send('About us'); 


D); 
在 Ruby on Rails” 中 ， 可 以 这 样 实现 : 


i routes.rb 
get '/about', to: 'pagessabout' 





# PagesController.rb 
class PagesController « ActionController::Base 
def about 
render 
end 
end 


每 种 框架 的 模式 各 不 相同 ， 但 是 在 上 面 两 种 情况 中 ， 你 都 有 一 个 服务 器 。 它 接收 一 个 请 求 ， 
并 路 由 到 一 个 控制 器 。 该 控制 器 根据 路 径 和 参数 执行 特定 的 任务 。 


客户 端 路 由 在 概念 上 很 相似 , 但 是 实施 方法 不 同 。 在 客户 端 路 由 的 情况 下 , 每 次 URL 发 生 恋 
化 时 , 不 一 定 会 向 服务 器 发 送 请 求 。 我 们 把 Angular 应 用 叫 作 单 页 应 用 程序 ( single page app, SPA ), 
因为 服务 器 只 提供 一 个 页 面 ， 负 责 泻 染 各 种 页 面 的 是 JavaScript。 


那么 ， 如 何 才 能 在 JavaScript 代 码 中 设 定 各 个 路 由 呢 ? 























7.2.1 初级 阶段 : 使 用 锚 标记 
在 初级 阶段 ， 客 户 端 路 由 使 用 了 一 个 巧妙 的 方法 : 它 不 使 用 指向 各 种 页 面 的 客户 端 URL, 而 





(D http://expressjs.com/guide/routing.html 
@ http://rubyonrails.org/ 
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是 使 用 锚 标 记 。 
可 能 你 已 经 知道 , 锚 标 记 的 传统 作用 是 直接 链接 到 所 在 网 页 的 其 他 位 置 , 并 让 浏览 器 滚动 到 
定义 该 锚 标 记 元 素 所 在 的 位 置 。 例 如 ， 如 果 在 HTML 页 面 中 定义 这 样 的 锚 标 记 : 


<!-- ... lots of page content here ... --» 
«a name-z"about"»«h1»About«/h1»«/a» 


当 访 问 http:/something/ffabout 这 个 URL 时 ， 浏 览 器 将 直接 跳 到 这 个 定义 about 锚 标记 的 H1 标 签 。 
SPA 应 用 客户 端 框架 使 用 的 方式 是 : 将 锚 标 记 作为 路 径 来 格式 化 ， 用 它们 代表 应 用 程序 的 
路 由 o 


例如 ，SPA 应 用 的 about 路 由 可 能 是 http://something/#/about。 这 就 是 所 谓 的 基于 锚 点 标记 的 
路 由 (hash-based routing )。 

这 个 方法 巧妙 的 地 方 在 于 ， 它 看 起 来 像 一 个 “普通 ”的 URL， 因 为 它 以 锚 标 记 和 和 斜 杜 开头 
( /about )。 
























































I 


7.2.2 进化 : HTML5 客户 端 路 由 

随 着 HTML5 的 引入 ,浏览 器 获得 了 新 的 能 力 : 在 不 需要 新 请 求 的 情况 下 ， 人 允许 在 代码 中 创 
建新 的 浏览 器 记录 项 并 显示 适当 的 URL。 

这 是 利用 history .pushstate 方 法 来 实现 的 ， 该 方法 允许 JavaSceript 控 制 浏览 器 的 导航 历史 。 


因此 ， 现 代 框 架 可 以 不 依赖 锚 标 记 方 法 来 进行 路 由 导航 ， 而 是 依赖 pushstate 在 无 需 重 新 加 
载 的 情况 下 控制 浏览 器 历史 。 












































AngularJS 注 意 事 项 : AngularJS 应 用 已 经 可 以 使 用 这 种 路 由 方法 了 ， 但 是 需要 
使 用 $locationProvider .htm15Mode(true) 来 特别 局 用。 




















在 Angular 中 ，HTML5 路 由 是 默认 的 模式 。 在 本 章 后 面 ,我 们 将 讲解 如 何 从 HTML5 模 式 退 回 
到 老 的 锚 标 记 模 式 。 





使 用 HTML5 路 由 模式 的 时 候 ， 需 要 注意 以 下 两 点 。 

(1) 并 非 所 有 的 浏览 器 都 支持 HTML5 路 由 模式 ， 所 以 如 果 需 要 支持 老 版 浏览 器 ， 
你 可 能 会 被 迫使 用 基于 锚 点 标记 的 路 由 模式 。 

(2) 服务 器 必须 支持 基于 HTML5 的 路 由 。 

为 什么 服务 器 必须 要 支持 基于 HTML5 路 由 ? 我 们 将 在 后 面 深入 讨论 。 
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7.3 编写 第 一 个 路 由 配置 


Angular 文 档 建议 使 用 HTML5 路 由 模式 "， 但 是 鉴于 上 一 节 提 到 的 种 种 挑战 我 
们 会 在 例子 中 使 用 基于 锚 点 标记 的 路 由 模式 进行 简化 。 
在 Angular 中 ， 我 们 通过 将 路 径 映 射 到 处 理 它们 的 组 件 来 配置 路 由 。 
我 们 来 创建 一 个 有 多 种 路 由 的 小 型 应 用 程序 。 在 这 个 例子 应 用 程序 中 ， 我 们 将 有 三 种 路 由 : 


口 主页 ， 使 用 / 鸭 home 路 径 ; 
a 关于 页 面 ， 使 用 /zyabout 路 径 ; 
a 联系 我 们 页 面 ， 使 用 /#Wcontact 路 径 ; 


最 后 ， 当 用 户 访问 根 路 径 CHAUV) 时 ， 重 定向 到 主页 路 径 。 











7.4 Angular 路 由 的 组 成 部 件 | 
7 


我 们 使 用 三 种 主要 部 件 来 配置 Angular 路 由 。 


口 Routes: 描述 了 应 用 程序 支持 的 路 由 配置 。 

D RouterOutlet: 这 是 一 个 “ 占 位 符 ” 组 件 ， 用 于 告诉 Angular 要 把 每 个 路 由 的 内 容 放 在 
哪里 。 

口 RouterLink 指 令 : 用 于 创建 各 种 路 由 链接 。 


让 我 们 来 进一步 讨论 它们 。 









































7.4.1 导入 
为 了 使 用 Angular 的 路 由 器 ， 首 先 从 @angular/router 库 中 导入 一 些 常 量 。 


code/routes/basic/app/ts/app.ts 


import { 
RouterModule, 
Routes 
) from 'Gangular/router'; 


现在 ,我 们 可 以 开始 定义 路 由 带 配 置 了 。 





7.4.2 ”路 由 配置 
为 了 定义 应 用 的 路 














配置 ， 首 先 创 建 一 个 Routes 配 置 ， 然 后 使 用 RouterModule. forRoot 























(D https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles 
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(routes) 来 为 应 用 程序 提供 使 用 路 由 器 必需 的 依赖 。 


code/routes/basic/app/ts/app.ts 





const routes: Routes - [ 
{ path: '', redirectTo: 'home', pathMatch: 'full' ], 
{ path: 'home', component: HomeComponent }, 
{ path: 'about', component: AboutComponent }, 
{ path: 'contact', component: ContactComponent }, 
{ path: 'contactus', redirectTo: 'contact' ], 


| 
注意 关于 路 由 配置 的 以 下 事项 。 
O path: 指定 了 该 路 由 要 处 理 的 URL 路 径 。 
C] component: 用 于 连接 当前 路 由 路 径 与 处 理 该 路 由 的 组 件 。 
口 redirectTo: 一 个 可 选 选 项 ， 用 于 将 当前 路 径 重 定 问 到 男 一 个 已 知 路 由 。 
综 上 所 述 ， 路 由 配置 的 目的 是 指定 组 件 要 处 理 的 路 径 。 
重 定向 
在 路 由 定义 中 使 用 redirectTo 是 在 告诉 路 由 器 ， 在 访问 该 路 由 的 path 时 ， 我 们 想 让 浏览 需 
重 定向 到 另 一 个 路 由 。 
在 上 面 的 示例 代码 中 ， 如 果 访 问 http://localhost:8080 了 #/ 根 路 径 ， 我 们 将 被 重 定向 到 home 路 由 。 
另 一 个 例子 是 contactus 路 由 。 































































































code/routes/basic/app/ts/app.ts 
{ path: 'contactus', redirectTo: 'contact' ], 
ERREA F, WW ihttp:/localhost:8080/Z/contactusix URL, AKANI V 2-4 8 XE [0] $81] 


/contact。 


o 示例 代码 本 节 例 子 的 完整 代码 可 以 在 示例 代码 中 的 routes/basic 目 录 中 找到 。 
查阅 README.md 文 件 ， 了 解构 建 和 运行 本 例 的 步骤 。 
路 由 需要 多 种 导入 声明 ， 我 们 在 下 面 的 例子 中 不 会 逐一 列 出 全 部 的 导入 声明 。 
但 是 ， 我 们 为 每 个 例子 列 出 了 源 文件 的 文件 名 和 行 号 。 如 果 你 遇 到 不 知道 如 何 
导入 某 些 类 的 问题 ， 请 使 用 编辑 器 打开 代码 文件 并 查看 完整 代码 。 
在 阅读 本 节 的 同时 ， 党 试 运行 代码 并 随意 发 挥 可 以 获得 更 加 深刻 的 认识 。 


7.4.9 安装 路 由 配置 


现在 有 了 路 由 配置 routes ， 我 们 需要 安装 它 。 为 了 在 应 用 中 使 用 路 由 配置 ， 首 先 要 对 
NgModule 进 行 两 项 修改 : 
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(1) + ARouterModule; 
(2) 在 NgModule 中 的 imports 数 组 里 使 用 RouterModule . forRoot (routes) 来 安装 路 由 配置 。 
下 面 是 为 本 应 用 在 NgModule 中 配置 的 路 由 。 


code/routes/basic/app/ts/app.ts 


























const routes: Routes - [ 
{ path: '', redirectTo: 'home', pathMatch: 'full' }, 
{ path: 'home', component: HomeComponent j, 
{ path: 'about', component: AboutComponent ], 
{ path: 'contact', component: ContactComponent }, 
{ path: 'contactus', redirectTo: 'contact' ], 


l; 


@NgModule({ 
declarations: [ 
RoutesDemoApp, 
HomeComponent , 
AboutComponent, 
ContactComponent 





l; 
imports: [ 

BrowserModule, 

RouterModule.forRoot(routes) // <-- routes 
], 
bootstrap: [ RoutesDemoApp ], 
providers: [ 

{ provide: LocationStrategy, useClass: HashLocationStrategy } 
] 


I» 
class RoutesDemoAppModule [] 





platformBrowserDynamic().bootstrapModule(RoutesDemoAppModule) 
.catch((err: any) => console.error(err)); 


7.4.4 使 用 crouter-outlety， 调 用 RouterOutlet 指令 


当 路 由 发 生变 化 时 ， 我 们 希望 保留 外 部 “布局 ”模板 ， 只 用 路 由 的 组 件 替 换 页 面 的 “内 部 ”。 
为 了 指定 Angular 在 页 面 的 什么 地 方 泻 染 各 种 路 由 的 内 容 ， 我 们 使 用 Routerout1let 指 令 。 
组 件 的 模板 中 指定 了 一 些 div 结 构 、 导 航 部 分 和 一 个 名 为 router-outlet 的 指令 。 
router-out1let 元 素 标 示 了 各 个 路 由 组 件 的 内 容 应 该 在 哪里 被 泻 染 。 





我 们 可 以 在 模板 中 使 用 router-outlet 指 令 ， 因 为 已 经 在 NgModule 中 导入 了 


RouterModule,; 
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下 面 是 应 用 中 用 于 承载 导航 的 组 件 及 其 模板 。 


code/routes/basic/app/ts/app.ts 





GComponent( { 
selector: 'router-app', 
template: ^ 
«div» 
«nav» 
«a»Navigation:«/a» 
«ul» 
<li><a [routerLink]-"['home' ] "»Home«/a» «/1li» 
<li><a [routerLink]-2"['about']"»About«/a»«/li» 
<li><a [routerLink]-"['contact']"»Contact Us«/a»«/li» 
</ul> 
</nav> 


«router-outlet»«/router-outlet» 
«/div» 


D) 


class RoutesDemoApp { 


} 


仔细 查看 上 而 模板 的 WA, 你 将 发 现 router-out1let 元 素 在 导航 目录 的 正 下 方 。 当 访问 /home 
， 这 里 便 是 HomeComponent 模 板 被 演 染 的 地 方 。 其 他 组 件 的 演 染 位 置 也 是 一 样 的 。 








7.4.5 使 用 [routerLink] 调用 routerLink 指令 
我 们 现在 知道 路 由 组 件 的 模板 将 在 哪里 被 泻 染 ， 那 么 如 何 才能 让 Angular 导 航 到 一 个 指定 路 


由 呢 ? 











我 们 可 以 尝试 使 用 纯 HTML， 像 这 样 直 接 链 接 到 路 


«a href="/#/home">Home</a> 


但 是 如 果 这 样 做 ， 点 击 这 个 链接 将 触发 页 面 重 载 ， 而 这 是 开发 单 页 应 用 时 要 杜绝 的 。 
要 解决 这 个 问题 ，Angular 提 供 了 一 个 方案 ， 可 以 在 不 重 载 页 面 的 情况 下 链接 路 由 : 使 用 



























































routerLink 指 令 。 





该 指令 允许 你 使 用 特殊 的 语法 写 链接 。 


code/routes/basic/app/ts/app.ts 


«a»Navigation:«/a» 
«ul» 

<li><a [routerLink]-"['home' ] "»Home«/a» «/1li» 

<li><a [routerLink]-2"['about']"»About«/a»«/li» 

<li><a [routerLink]-"['contact']"»Contact Us«/a»«/li» 
«/ul» 
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我 们 可 以 在 左手 边 看 到 [routerLink] ， 它 将 该 指令 用 于 当前 元 素 (ay 标签 )。 


在 右手 边 是 一 组 数组 ， 它 的 第 一 个 元 素 是 路 由 的 路 径 ， 比 如 "['home'] "或 者 "['about']" 
用 来 指定 点 击 该 元 素 时 应 该 导航 到 哪个 路 由 。 






































routerLink 的 值 是 一 串 包 含 了 一 组 字符 串 数组 ( 例如" ['home']" ) 的 字符 串 ， 看 起 来 可 能 
比较 奇怪 。 这 是 因为 在 链接 路 由 时 ,你 可 以 提供 更 多 信息 。 绍 子路 由 和 路 由 参数 时 进 
行 更 加 详尽 的 讲解 。 


我 们 暂时 只 使 用 来 自 于 根 应 用 组 件 的 路 











名 字 。 





— 








7.5 整合 





现在 有 了 所 有 的 基本 部 件 ， 可 以 来 整合 它们 ， 实 现 路 由 导航 了 。 
我 们 需要 修改 的 第 一 个 文件 是 应 用 程序 的 index.html。 
下 面 是 该 文件 的 完整 代码 。 




















code/routes/basic/app/index.html 


<!doctype html» 
<html> 
«head» 
«base href="/"> 
«title»ng-book 2: Angular Router«/title» 


(X for (var css in o.htmlWebpackPlugin.files.css) { £X) 
«link href-"([X-o.htmlWebpackPlugin.files.css[css] Xj" rel-"stylesheet"» 

{% 3j 

«/head» 

«body» 
«router-app»«/router-app» 
«script srcz"/core.js"»«/script» 
«script srcz"/vendor.js"»«/script» 
«script srcz"/bundle. js"»«/script» 

«/body» 

«/html» 


Bg a 的 部 分 来 自 于 webpack 模 块 捆绑 器 "。 我 们 在 本 章 中 使 
用 了 webpack， 它 是 一 个 帮 你 捆绑 资源 的 工具 。 


你 可 能 很 熟悉 这 些 代码 ， 但 是 下 面 这 行 除外 : 


«base href="/"> 





(D https://webpack.github.io/ 
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这 行 声明 了 HTML 标 签 base。 传 统 上 ,该 标签 的 作用 是 使 用 相对 路 径 来 告知 浏览 器 去 哪里 查 
找 图 片 和 其 他 资源 。 


Angular 的 路 由 器 也 依赖 这 个 标签 来 确定 如 何 构建 它 的 路 由 信息 。 


例如 ， 如 果 一 个 路 由 的 路 径 为 /hello ，base 元 素 声 明 是 href="/app" ， 那 么 应 用 程序 将 使 用 
/app/pello 作 为 实际 路 径 。 


有 了 时候，Angular 应 用 开发 者 对 应 用 中 HTML 的 head 部 分 没有 访问 权 。 比 如 在 重用 已 有 大 型 
应 用 的 页 头 和 页 脚 时 。 


孝 运 的 是 ,我 们 有 方法 处 理 这 种 情况 。 你 可 以 在 配置 NgModule 时 , 像 这 样 使 用 APP_BASE_HREF 
提供 者 ， 用 代码 来 声明 应 用 程序 的 基准 路 径 : 


@NgModule({ 
declarations: [ RoutesDemoApp ], 
imports: [ 
BrowserModule, 
RouterModule.forRoot(routes) // «-- routes 
], 
bootstrap: [ RoutesDemoApp ], 
providers: [ 
{ provide: LocationStrategy, useClass: HashLocationStrategy ], 
( provide: APP BASE HREF, useValue: '/' } // «--- this right here 
] 
}) 


将 { provide: APP. BASE. HREF, useValue: '/' } 放 到 providers 中 ， 等 同 于 在 应 用 的 HTML 
页 头 里 使 用 cbase href="/">。 












































7.5.1 创建 组 件 
在 处 理 主 应 用 组 件 之 前 ， 首 先 创 建 三 个 简单 的 组 件 ， 每 种 路 由 各 一 个 。 


1. HomeComponent 





HomeComponent 只 有 一 个 ht 标签 ， 显示 Welcome!。 下 面 是 HomeComponent 的 完整 代码 。 


code/routes/basic/app/ts/components/HomeComponent.ts 
/* 

* Angular 

*/ 


import [Component] from 'Gangular/core'; 


GComponent( { 

selector: 'home', 

template: ^«h1»Welcome!«/h1»^ 
» 
export class HomeComponent { 


} 
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2. AboutComponent 
同样 ，AboutComponent 也 只 有 一 个 基本 的 ht 。 


code/routes/basic/app/ts/components/AboutComponent.ts 
/* 


* Angular 
*/ 


import [Component] from 'Gangular/core'; 


GComponent ( f 
selector: 'about', 
template: ^«h1»About«/h1»^ 
}) 
export class AboutComponent { 


} 


3. ContactComponent 





AboutComponent 也 是 一 样 。 





code/routes/basic/app/ts/components/ContactComponent.ts 
/* 

* Angular 

*/ 


import [Component] from 'Gangular/core'; 


GComponent ( f 

selector: 'contact', 

template: ^«hi»Contact Us«/h1»^ 
}) 


export class ContactComponent { 


} 
这 些 组 件 并 没有 什么 特别 之 处 ， 所 以 让 我 们 开始 探讨 主 app.ts 文 件 。 


7.5.2 ”应 用 程序 组 件 


现在 我 们 需要 创建 一 个 根 级 “应 用 程序 ”组 件 ， 将 所 有 的 部 件 组 装 起 来 。 
我 们 先 从 core 和 router 库 导入 需要 的 模块 。 


code/routes/basic/app/ts/app.ts 
/* 


* Angular Imports 
*/ 
import { 
NgModule, 
Component 
) from 'Gangular/core'; 
import [BrowserModule] from 'Gangular/platform-browser'; 


, 
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import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import { 
RouterModule, 
Routes 
} from 'Gangular/router'; 
import (LocationStrategy, HashLocationStrategy] from 'Gangular/common'; 


接 下 来 ， 导 入 上 面 创 建 的 三 个 组 件 。 


code/routes/basic/app/ts/app.ts 








import [HomeComponent) from 'components/HomeComponent'; 
import ([AboutComponent] from 'components/AboutComponent'; 
import (ContactComponent]) from 'components/ContactComponent'; 


现在 ， 让 我 们 真正 深入 到 组 件 代码 之 中 。 首 先 声 明 组 件 选择 器 和 模板 。 


code/routes/basic/app/ts/app.ts 


GComponent ( { 
selector: 'router-app', 
template: ^ 
«div» 

«nav» 
«a»Navigation:«/a» 
«ul» 


<li><a [routerLink]-z"['home']"»Home«/a» «/li» 
<li><a [routerLink]-"['about']"»About«/a»«/li» 
<li><a [routerLink]-"['contact']"»Contact Us«/a»«/li» 
«/ul» 
«/nav» 





«router-outlet»«/router-outlet» 
«/div» 


}) 


class RoutesDemoApp { 


} 

我 们 将 为 这 个 组 件 使 用 两 个 路 由 指令 : Routeroutlet 和 RouterLink。 这 两 个 指令 和 其 他 公 
共 路 由 指令 一 起 ， 在 我 们 将 RouterModule 放 置 到 NgModule 的 imports 数 组 中 时 被 导入 进来 。 

作为 回顾 ，Routeroutlet 指 令 指 定 了 路 由 内 容 在 模板 中 被 泻 染 的 位 置 ， 即 模板 代码 中 
«router-outlet»«/router-outlet» AJME o 

RouterLink 指 令 创 建 指向 路 由 的 导航 链接 。 


code/routes/basic/app/ts/app.ts 












































«a»Navigation:«/a» 
«ul» 

<li><a [routerLink]-"['home' ] "»Home«/a» «/1li» 

<li><a [routerLink]-2"['about']"»About«/a»«/li» 

<li><a [routerLink]-"['contact']"»Contact Us«/a»«/li» 
«/ul» 
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使 用 [routerLink] 将 指示 Angular 获 取 click 事 件 的 所 有 权 , 然后 基于 路 由 的 定义 , 初始 化 路 
由 融 并 导航 到 正确 的 位 置 。 


7.5.3 配置 路 由 
接 下 来 ， 我 们 创建 一 组 类 型 为 Routes 的 对 象 数组 ， 并 用 它 来 声明 路 由 配置 。 


code/routes/basic/app/ts/app.ts 


const routes: Routes - [ 

{ path: '', redirectTo: 'home', pathMatch: 'full' }, 
{ path: 'home', component: HomeComponent j, 

{ path: 'about', component: AboutComponent ], 

{ path: 'contact', component: ContactComponent ], 

{ path: 'contactus', redirectTo: 'contact' ], 


]; 
在 app.ts 文 件 的 最 后 ， 我 们 这 样 引导 应 用 。 


code/routes/basic/app/ts/app.ts 


@NgModule({ 
declarations: [ 
RoutesDemoApp, 
HomeComponent , 
AboutComponent, 
ContactComponent 








], 
imports: [ 
BrowserModule, 
RouterModule.forRoot(routes) // «-- routes 
Ip 
bootstrap: [ RoutesDemoApp ], 
providers: [ 
{ provide: LocationStrategy, useClass: HashLocationStrategy } 
] 
I» 
class RoutesDemoAppModule {} 





platformBrowserDynamic().bootstrapModule(RoutesDemoAppModule) 
.catch((err: any) => console.error(err)); 


与 一 贯 的 做 法 一 样 ， 我 们 3 | 导 应 用 并 指定 RoutesDemoApp 为 根 组 件 。 

注意 ， 我 们 将 所 有 必需 的 组 件 放 到 declarations 里 。 如 果 要 路 由 到 一 个 组 件 ， 那 么 必须 在 
某 个 NgModule( 当前 模块 或 者 导入 的 模块 ) 里 面 声明 它 。 

在 imports 中 ， 我们 有 RouterModule. forRoot(routes)。RouterModule. forRoot (routes) 


是 一 个 函数 , 接收 我 们 的 路 由 对 象 数 组 并 配置 路 由 器 , 然后 返回 依赖 列表 , 例如 RouteRegistry、 
Location 和 其 他 一 些 路 由 需 运 行 时 必需 的 类 。 


在 providers 中 ; 我 们 有 : 
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{ provide: LocationStrategy, useClass: HashLocationStrategy } 


下 面 深入 讲解 这 行 代码 的 作用 。 





7.6 ”路 由 策略 
定位 策略 ( location strategy ) 是 Angular 应 用 从 路 由 定义 进行 解析 和 创建 路 径 的 方式 。 

















o 在 AngularJS 中 ， 它 被 称 作 routing mode. 














Angular 的 默认 策略 为 PathLocationStrategy ， 也 就 是 HTML5 路 由 。 在 使 用 这 个 策略 时 ， 路 
由 的 路 径 是 常规 路 径 ， 例 如 home 或 者 /contact。 


通过 将 LocationStrategy 类 绑 定 到 新 的 策略 类 实例 ， 我 们 可 以 改变 应 用 的 定位 策略 。 

我 们 可 以 不 使 用 默认 的 PathLocationStrategy ， 而 是 使 用 HashLocationStrategy。 

我 们 使 用 锚 点 标记 策略 作为 默认 策略 ， 因 为 如 果 使 用 HTML5 路 由 ， 那 么 URL 将 成 为 普通 的 
路 径 ( 而 非 使 用 锚 点 标记 或 者 锚 标 签 )。 

这 样 ， 当 你 在 客户 端点 击 一 个 链接 时 ， 路 由 应 该 能 正常 工作 并 进行 导航 ， 比 如 从 /about 到 
/contact。 

如 果 刷 新 页 面 ， 我 们 向 服务 器 索要 的 就 不 是 服务 器 提供 的 根 URL ， 而 是 /about 或 者 /contact。 
因为 服务 器 端 没有 对 应 /about 的 页 面 ， 所 以 它 会 返回 404. 

该 默认 策略 适用 于 基于 锚 点 标记 的 路 径 ， 例 如 /Whome 或 者 /#W/contact。 服 务 器 将 它们 解析 为 / 
路 径 (这 也 是 AngularJS 的 默认 模式 )。 

















































































































如 何在 产品 中 使 用 HTMILS 模 式 呢 ? 

要 使 用 HTMLS 模 式 路 由 ， 你 必须 配置 服务 器 来 将 所 有 “不 存在 ”的 路 由 重 定向 
到 根 URL。 

在 routes/basic 项 目 中 ， 我 们 包含 了 一 个 脚本 ， 可 在 webpack-dev-server 环 境 下 开 
发 ， 并 使 用 HTML5 路 径 。 

要 使 用 它 ， 需 要 cd routes/basic 并 运行 node html5-dev-server.jso 


最 后 ， 为 了 让 示例 应 用 适合 这 个 新 的 策略 ， 必 须 首 先导 和 人 LocationStrategy 和 HashLoca- 
tionStrategy,; 








code/routes/basic/app/ts/app.ts 


import (LocationStrategy, HashLocationStrategy] from 'Gangular/common'; 


然后 将 定位 策略 添加 到 NgModule 的 providers。 
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code/routes/basic/app/ts/app.ts 
providers: [ 


{ provide: LocationStrategy, useClass: HashLocationStrategy } 


] 


你 可 以 编写 自己 的 策略 。 只 需要 扩展 LocationStrategy 类 并 实现 一 些 方法 即 


可 。 开 始 的 好 方法 是 阅读 Angular 的 HashLocationStrategy 或 者 PathLocation- 
Strategy 类 的 源 代码 。 


7.7 ”路 径 定位 策略 


在 示例 应 月 








目的 目录 中 ， 有 一 个 名 为 app/ts/app.html5.ts 的 文件 。 





如 果 你 想 试 试 默认 的 PathLocationStrategy, 那么 将 这 个 文件 的 内 容 复 制 到 app/ts/app.ts 中 
然后 重新 加 载 应 用 即 可 。 


78 运行 应 用 程序 


现在 ， 你 可 以 到 应 用 的 根 目 录 (code/routes ) 并 运行 npm run server 来 


启动 应 用 程序 。 
当 你 在 浏览 器 中 输入 http:/Vlocalhost:8080/ 时 , 应 该 能 看 到 home 路 由 被 泻 染 了 ( 如 图 7-1 所 示 )。 








W ng-book 2: Angular 2 Rout x 


Felipe 
e CŒ | D localhost:8080/#/home 


Navigation: Home About Contact us 


Welcome! 





图 7-1 Home 路 由 
， 浏 览 器 中 的 URL 被 重 定向 到 了 http://localhost:8080/#/home。 
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现在 点 击 每 个 链接 ， 就 会 泻 染 相应 的 路 由 (分 别 如 图 7-2、 图 7-3 所 示 )。 


Wi ng-book 2: Angular 2 Rou: x Felipe 


E C [)localhost:8080/£/about zz 


Navigation: ^ Home About Contact us 


About 


图 7-2 About 路 由 


Wi ng-book 2: Angular 2 Rout x Felipe 





€ Œ | [5 localhost:8080/s/contact iE 


Navigation: ^ Home ^ About Contactus 


Contact Us 


图 7-3 Contact Us 路 由 
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7.9 路 


由 参数 





我 们 经 常 希望 在 应 用 程序 中 导航 到 特定 的 资源 。 例如, 假设 我 们 有 一 个 新 闻 网 站 , 它 拥有 很 
多 文章 。 每 篇 文章 可 能 有 一 个 ID。 如 果 有 一 篇 ID 为 3 的 文章 ， 那 么 可 以 通过 下 面 的 URL 来 导航 到 


这 篇 文章 : 
/articles/3 
如 果 有 一 篇 ID 为 4 的 文章 ， 我 们 可 以 在 这 里 访问 它 : 
/articles/4 
以 此 类 推 


RER, 我们 不 是 为 每 篇 文章 编写 一 个 路 由 ， 而 是 使 用 一 个 变量 或 者 路 由 参数 。 我们 可 以 像 
这 样 在 路 径 段 前 面 添加 一 个 冒号 ， 设 定 路 由 接收 一 个 参数 ， 
/route/:param 
在 示例 新 闻 站 里 ， 我 们 可 以 这 样 定义 路 由 : 
/articles/:id 
为 了 添加 参数 到 路 由 配置 ， 我 们 这 样 指定 路 由 路 径 。 


code/routes/music/app/ts/app.ts 








const routes: Routes - [ 


{ pa 
{ pa 
{ pa 
{ pa 
{ pa 
] A 


th: '', redirectTo: 'search', pathMatch: 'full' }, 
th: 'search', component: SearchComponent }, 

th: 'artists/:id', component: ArtistComponent }, 
th: 'tracks/:id', component: TrackComponent }, 

th: 'albums/:id', component: AlbumComponent }, 





当 我 们 访问 路 由 /artist/123 时 ，123 部 分 是 被 传 到 路 由 的 id 路 由 参数 。 





但 是 ， 


如 何 获取 特定 路 由 的 参数 呢 ? 这 正 是 使 用 路 由 参数 的 地 方 。 


ActivatedRoute 
为 了 使 用 路 由 参数 ， 我 们 首先 需要 导 人 ActivatedRoute : 


import 


{ ActivatedRoute } from 'Gangular/router'; 





接 下 来 ， 将 ActivatedRoute 注 和 组件 的 构造 函数 中 。 人 例如， 假设 我 们 有 一 个 这 样 定 义 的 


Routes : 


const routes: Routes = [ 


]; 


{ path: 'articles/:id', component: ArticlesComponent } 
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然后 ， 在 开发 ArticleComponent 时 ， 我们 将 ActivatedRoute 作 为 参数 添加 到 构造 函数 : 


export class ArticleComponent { 
id: string; 


constructor(private route: ActivatedRoute) { 
route.params.subscribe(params => { this.id = params['id']; }); 


} 
} 





注意 , route.params 是 一 个 可 观察 对 象 。 我 们 可 以 使 用 .subscribe 将 参数 值 提取 到 固定 值 。 
在 这 种 情况 下 ， 我 们 将 params['id'] 赋 值 给 组 件 实 例 的 变量 id。 





现在 ， 在 访问 /articles/236 时 ， 组 件 的 id 属性 应 该 接收 236。 


7.10 音乐 搜索 应 用 

下 面 来 编写 一 个 更 加 复杂 的 应 用 。 我 们 将 构建 一 个 音乐 搜索 应 用 ( 如 图 7-4 所 示 )， 它 具有 以 
下 特性 : 

(1) 按照 提供 的 关键 词 搜索 曲目 ; 

Q) 在 数据 表格 中 显示 匹配 曲目 ; 

(3) 点 击 歌手 名 字 时 ， 显 示 歌 手 介绍 ; 

(4) 点 击 专辑 名 字 时 ， 显 示 专 辑 信 息 和 曲目 列表 ; 

(5) 点 击 歌曲 名 字 时 ， 显 示 曲 目 信息 并 人 允许 用 户 试听 。 

这 个 应 用 需要 的 路 由 如 下 所 示 。 


Q /search: 搜索 表格 和 搜索 结果 。 
口 /artists/:id: 艺术 家 信息 ， 接 收 Spotify 的 ID 为 参数 。 

O /albums/:id: 专辑 信息 ， 包 含 曲 目 列表 ， 接 收 Spotify 的 ID。 
O /tracks/:id: 曲目 信息 和 试听 ， 也 接收 Spotify 的 ID。 



































示例 代码 ”本 节 例 子 的 完整 代码 可 以 在 示例 代码 中 的 routes/music 目 录 中 找到 。 
查阅 README.md 文 件 ， 了 解构 建 和 运行 本 例 的 步骤 。 


我 们 将 使 用 Spotify APT" 来 获取 曲目 、 艺 术 家 和 专辑 的 信息 。 





(D https://developer.spotify.com/web-api 
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Sportify musicforactive people 


Search 


rhapsodyin blue Search 


Results 





Chreat Performances 1 


S= 
p 











RHAPSODY IN BLUE 
AN AMERICAN IN PARIS 





NEW YORK 
PHILHARMONIC 





George Gershwin George Gershwin 
Rhapsody in Blue 


George Gershwin 
Rhapsody In Blue Rhapsody In Blue 





Gershwin: Rhapsody in Blue / An American in 


Gershwin: Rhapsody in Blue/An American in Gershwin Plays Gershwin: The Piano Rolls 
Paris 


Paris 


rrr GERSHWIN ~ 
GERSHWIN Rhapsody in blue ， Rhapsody In Blue- 


GERSHWIN JON NAKAMATSU: 
DIANO CONCERTO IN F aei e versions for two pianos 

RHADSODY IN BLUE. ORCHESTRA KATIA & MARI 
CUBAN OVERTURE 








AR 
George Gershwin George Gershwin George Gershwin 
Rhapsodyin Blue Rhapsodyin Blue Rhapsodyin Blue 
Gershwin: Rhapsody in Blue; Piano Concerto in Gerswin - Rhapsodv in Blue and Bevond 


Gershwin: Piano Concerto in F. Rhapsodv in 


图 7-4 ”音乐 应 用 的 搜索 视图 


7.10.1 首要 步骤 
我 们 要 写 的 第 一 个 文件 是 app.ts。 首 先 ， 从 Angular 导 入 需要 的 类 。 

















code/routes/music/app/ts/app.ts 
/* 


* Angular Imports 
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*/ 
import { 
Component 
) from 'Gangular/core'; 
import { NgModule ) from 'Gangular/core'; 
import { BrowserModule } from 'Gangular/platform-browser'; 
import { platformBrowserDynamic } from 'Gangular/platform-browser-dynamic'; 
import { HttpModule ) from 'Gangular/http'; 
import { FormsModule } from 'Gangular/forms'; 
import { 
RouterModule, 
Routes 
) from 'Gangular/router'; 
import { 
LocationStrategy, 
HashLocationStrategy, 
APP. BASE. HREF 
} from 'Gangular/common'; 





/* 
* Components 


*/ 
现在 我 们 有 了 所 有 导入 声明 ， 接 下 来 考虑 每 个 路 由 的 组 件 。 
O Search 路 由 : 新 建 SearchComponent。 该 组 件 将 连接 Spotify API 并 执行 搜索 功能 ， 然 后 在 
数据 表格 中 显示 搜索 结 结果 。 
口 Artists 路 由 : 新 建 ArtistComponent ， 显示 艺术 家 信息 o 


口 Albums 路 由 : 新 建 AlbumComponent , 显示 专辑 的 曲目 列表 。 
口 Tracks 路 由 : 新 建 TrackComponent， 显示 曲目 并 允许 试听 。 


因为 新 组 件 需要 与 Spotify API 交 互 , 所 以 我 们 需要 创建 一 个 服务 , 它 使 用 http 模 块 来 调用 API 
服务 器 。 


应 用 的 一 切 都 依赖 这 些 数据 ， 所 以 我 们 首先 创建 SpotifyService。 

































































7.10.2 SpotifyService 


你 可 以 在 示例 代码 中 的 routes/music/app/ts/services 目 录 找 到 SpotifyService 的 
完整 代码 。 


我 们 要 实现 的 第 一 个 方法 是 searchByTrack ， 它 将 利用 提供 的 关键 词 来 搜索 曲目 。 
Spotify API 文 档 中 描述 了 API 端 点 中 有 一 个 名 为 Search endpoint" 的 端点 。 





(D https://developer.spotify.com/web-api/search-item/ 
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Y 


该 端点 正 是 我 们 想 要 的 : 它 接 收 一 个 查询 对 象 ( 使 用 gq 参数 ) 和 一 个 type 人 参数。 
在 这 种 情况 下 ， 查 询 对 象 是 搜索 关键 词 。 因 为 搜索 的 是 歌曲 ， 所 以 type 为 track。 
服务 的 第 一 个 版 本 可 能 如 下 所 示 : 


class SpotifyService { 
constructor(public http: Http) { 
j 









































searchByTrack(query: string) { 
let params: string - [ 
`q=${query}`, 
^type-track^ 
]-join("&"); 
let queryURL: string = ^https://api.spotify.com/v1/search?$(params]'; 
return this.http.request(queryURL).map(res => res. json()); 
j 
j 


这 上 段 代码 向 https://api.spotify.conm/v1/search 这 一 URL 执 行 HTTP GET 请 求 ,传人 query ( 搜索 关 
键 词 ) 和 硬 编 码 为 track 的 type。 


该 http 调 用 返回 一 个 Observable。 我 们 将 进一步 使 用 RxJS 函 数 map 转 换 搜 索 结果 ( 一 个 http 
模块 的 Response 对 象 ) 并 将 它 解 析 为 JSJON， 最 终 获 得 一 个 对 象 。 
任何 调用 searchByQuery 的 函数 都 可 以 使 用 observable API 来 订阅 它 的 响应 : 


service 
.searchTrack( 'query') 
.subscribe((res: any) -» console.log('Got object', res)) 














7.10.3  SearchComponent 


现在 我 们 有 了 执行 曲目 搜索 的 服务 ， 可 以 开始 编写 SearchComponent 了。 
同样 ， 以 导入 声明 开始 。 


code/routes/music/app/ts/components/Search Component.ts 
/* 
* Angular 


*/ 


import {Component, OnInit} from 'Gangular/core'; 
import { 

Router, 

ActivatedRoute, 
) from 'Gangular/router'; 


/* 


* Services 
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*/ 
import {SpotifyService} from 'services/SpotifyService'; 


这 里 ， 我 们 导入 了 刚刚 新 建 的 Spoti fyService 类 和 一 些 其 他 类 。 
我 们 的 目标 是 像 卡 片 一 样 一 条 一 条 地 泻 染 曲 目 搜索 结果 ， 如 图 7-5 所 示 。 








Huckleberry Flint 
Whiskey Before Breakfast 


A Brief And True Report Concerning Huckleberry Flint 


图 7-5 音乐 应 用 的 卡片 


现在 开始 开发 组 件 。 我 们 用 search 作 为 选择 器 ,并 使 用 下 面 的 模板 。 该 模板 有 点 长 ， 因 为 我 
们 适当 添加 了 一 些 样式 ， 但 是 相 比 我 们 迄今 做 过 的 那些 ， 它 并 不 复杂 。 





code/routes/music/app/ts/components/SearchComponent.ts 
GComponent( f 

selector: 'search', 

template: ^ 

«hi»Search«/h1» 


«p» 
«input type="text" #newquery 
[value]="query" 
(keydown .enter )="submit(newquery.value)"> 


«button (click)="submit(newquery.value)">Search</button> 
</p> 
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«div xngIf-"results"» 
«div «ngIf-z"!results.length"» 
No tracks were found with the term '{{ query }}' 


«/div» 


«div «ngIf-"results.length"» 
«hi»Results«/h1» 


«div class="row"> 
«div class-"col-sm-6 col-md-4" xngFor-"let t of results"» 


«div classz"thumbnail"» 
«div classz'"content"» 
<img src="{{ t.album.images[0].url }}" class-"img-responsive"» 
«div class="caption"> 
«h3» 
«a [routerLink]-2"['/artists', t.artists[0].id]"» 
{{ t.artists[0].name }} 
«/a» 
«/h3» 
«br» 
«p» 
«a [routerLink]-"['/tracks', t.id]"» 
{{ t.name }} 
«/a» 
«/p» 
«/div» 
«div classz"attribution"» 


«h4» 

«a [routerLink]-2"['/albums', t.album.id]"» 
{{ t.album.name }} 

«/a» 

«/h4» 

«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 


p) 

1. 搜索 框 

下 面 来 分 段 分 析 HTML 模 板 。 

搜索 框 在 第 一 段 中 。 
code/routes/music/app/ts/components/SearchComponent.ts 


«p» 
«input type="text" snewquery 


[value]2"query" 
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(keydown.enter)-"submit(newquery.value)"» 
«button (click)s"submit(newquery.value)"»Search«/button» 
«/p» 


这 里 ， 我 们 插入 了 输入 框 ， 并 将 其 DOM 元 素 的 value 属 性 绑 定 到 组 件 的 query 属 性 。 


我 们 还 给 这 个 元 素 赋予 了 一 个 模板 变量 ， 名 为 #newquery。 这 样 我 们 就 可 以 在 模板 中 通过 
uo oic 


按钮 将 触发 组 件 的 submit 方 法 ， 将 输入 框 的 值 当 作 参数 传人 。 


我 们 还 希望 在 用 户 按 下 回 车 键 以 后 触发 subm 让 事件 ， 所 以 将 keydown .enter 事 件 绑 定 到 输 
入 框 。 


2. 搜索 结果 和 链接 
接 下 来 的 部 分 显示 搜索 结果 。 我 们 依靠 ngFor 指 令 来 迭代 返回 对 象 中 的 每 条 曲目 。 


code/routes/music/app/ts/components/SearchComponent.ts 





[MI 























<div class="row"> 
«div class="col-sm-6 col-md-4" «ngFor-"let t of results"» 
«div classz"thumbnail"» 





我 们 为 每 条 曲目 显示 其 艺术 家 的 名 字 。 


code/routes/music/app/ts/components/SearchComponent.ts 


«h3» 
«a [routerLink]-"['/artists', t.artists[0].id]"» 
(( t.artists[0].name }} 
«/a» 
«/h3» 


注意 我 们 是 如 何 使 用 RouterLink 指 令 来 重 定向 到 [' /artists'，t.artists[0] .id] 的 。 


这 是 为 特定 路 由 设置 路 由 参数 的 方法 。 假 设 有 一 个 id 为 abc123 的 艺术 家 ， 当 这 个 链接 被 点 击 
本 应 用 将 导航 到 /artistabc123 ( abc123 是 :id 参数 )。 


下 面 将 展示 如 何在 该 路 由 对 应 的 组 件 中 获取 这 个 参数 。 
现在 ， 我 们 这 样 显 示 曲 目 : 























时 








code/routes/music/app/ts/components/SearchComponent.ts 


<p> 
<a [routerLink]="['/tracks', t.id]"> 
{{ t.name }} 
</a> 
</p> 


这 样 显示 专辑 : 
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code/routes/music/app/ts/components/Search Component.ts 


«h4» 
«a [routerLink]-2"['/albums', t.album.id]"» 
{{ t.album.name }} 
«/a» 
«/h4» 


3. SearchComponent 2$ 
HAA CT KR 


code/routes/music/app/ts/components/SearchComponent.ts 





export class SearchComponent implements OnInit { 
query: string; 
results: Object; 


constructor (private spotify: SpotifyService, 
private router: Router, 
private route: ActivatedRoute) { 
this.route 





.queryParams 
.subscribe(params => { this.query = params['query'] || ''; }); 
j 
我 们 声明 了 两 个 属性 : 








口 query ， 用 来 处 理 当前 搜索 关键 词 ; 
口 results ， 用 来 存储 搜索 结果 。 

在 构造 函数 的 参数 中 ， 我 们 注入 了 (之 前 创建 的 ) SpotifyService, 、Router 和 Activated- 
Route， 并 将 它们 设置 为 类 属性 。 

在 构造 函数 中 ， 我 们 用 subscribe 订 阅 到 queryParams 属 性 。 通 过 它 ， 我 们 可 以 访问 查询 参 
数 ， 比 如 搜索 关键 词 (params['query'] )。 


在 一 个 像 http://localhost/#/search?query=cats&order=ascending 这 样 的 URL 中 ，queryParams 以 
对 象 的 形式 为 我 们 提供 路 由 参数 。 这 就 是 说 ,我们 可 以 从 params['order'] 中 访问 order (在 本 
例 中 为 ascending )。 

另外 ， 注 意 queryParams 与 route.params 有 所 不 同 。route.params 在 路 由 配置 中 匹配 参数 ， 
而 queryParams 在 查询 字符 串 中 匹配 参数 。 

在 本 例 中 ， 如 果 没 有 query 参 数 ， 那 么 我 们 将 this .query 设 置 为 空 字符 串 。 

e search 方 法 


在 SearchComponent 中 , 我 们 将 调用 SpotifyService 服 务 并 演 染 搜索 结果 。 我 们 要 在 下 面 两 
种 情况 下 运行 搜索 : 
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a 当 用 户 输入 搜索 关键 词 并 提交 表单 时 ; 
口 当 用 户 使 用 带 有 查询 参数 的 URL 导 航 到 本 页 面 时 (例如 ， 用 其 他 人 共享 的 链接 或 者 收藏 
的 本 页 面 链接 )。 


为 了 在 上 面 两 种 情况 下 执行 实际 的 搜索 ， 我 们 创建 了 search 方 法 。 


code/routes/music/app/ts/components/SearchComponent.ts 











search(): void { 
console.log('this.query', this.query); 
if (!this.query) ( 
return; 


} 


this.spotify 
.searchTrack(this.query) 
.subscribe((res: any) => this.renderResults(res)); 


] 
search KOM M fthis .query 属 性 的 值 来 得 知 应 该 搜索 什么 。 因 为 我 们 在 构造 函数 中 订 
阅 了 queryParams ， 所 以 可 以 确认 this.query 总 是 有 最 新 的 搜索 关键 词 。 
然后 ， 我 们 订阅 到 searchTrack 可 观察 对 象 。 这 样 ， 只 要 有 新 搜索 结果 到 达 ， 我 们 就 调用 


renderResults, 


























code/routes/music/app/ts/components/SearchComponent.ts 


renderResults(res: any): void { 
this.results - null; 
if (res && res.tracks && res.tracks.items) { 
this.results - res.tracks.items; 
j 
j 


我 们 声明 了 组 件 属性 results。 只 要 它 的 值 有 变化 ，Angular 就 会 自动 更 新 视图 。 

e 在 页 面 加 载 时 进行 搜索 

正如 上 面 指出 的 ， 我 们 希望 在 URL 包 含 搜索 查询 参数 时 ， 能 够 直接 自动 获取 搜索 结 

为 了 达到 这 个 目标 ， 我 们 将 实现 一 个 Angular 路 由 器 提供 的 钩子 ， 在 组 件 初始 化 的 时 候 运 














e» 这 难道 不 是 构造 函数 要 做 的 吗 ? 既 正 确 ， 也 不 正确 。 正 确 是 因为 构造 函数 是 用 

来 初始 化 变量 值 的 ， 但 是 如 果 想 要 撰写 优质 、 容 易 测 试 的 代码 ， 你 就 要 最 小 化 
对 象 构建 的 副作用 。 请 记 住 ， 你 应 该 像 下 面 这 样 ， 将 组 件 初 始 化 代码 放 到 一 个 
A) CN. 





下 面 是 ngonInit 方 法 的 代码 。 
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code/routes/music/app/ts/components/Search Component.ts 


ngOnInit(): void { 
this.search(); 


j 
为 了 使 用 ngonIn 让 ， 我 们 导入 onInit 接 口 ， 并 声明 组 件 类 implements OnInit。 


正如 你 所 看 到 的 , 我 们 在 这 里 仅仅 执行 了 搜索 。 因 为 我 们 的 搜索 关键 词 来 自 于 URL， 所 以 这 
没有 问题 。 


e 提交 表单 
现在 来 看 看 在 用 户 提交 表单 的 时 候 ， 我 们 应 该 干什么 。 











code/routes/music/app/ts/components/Search Component.ts 
submit(query: string): void { 


this.router.navigate(['search'], { queryParams: { query: query } }) 
.then(. => this.search() ); 
j 


我 们 手动 告诉 路 由 器 导航 到 搜索 路 由 ， 并 提供 了 query 参 数 ， 然 后 执行 搜索 功能 。 


这 样 做 为 我 们 带 来 了 很 大 的 好 处 : 如 果 刷 新 浏览 器 , 我 们 将 会 看 到 一 样 的 搜索 结果 。 可 以 说 ， 
我 们 将 搜索 关键 词 保 存 到 URL 了 。 


e 整合 


下 面 是 SearchComponent 类 的 完整 代码 。 











code/routes/music/app/ts/components/SearchComponent.ts 
/* 
* Angular 


*/ 


import {Component, OnInit} from '@angular/core'; 
import { 

Router, 

ActivatedRoute, 
} from 'Gangular/router'; 


/* 

* Services 

*/ 
import {SpotifyService} from 'services/SpotifyService'; 
GComponent ( f 

selector: 'search', 

template: ^ 

«hi»Search«/h1» 


«p» 
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«input type="text" snewquery 
[value]-2"query" 
(keydown.enter)-"submit(newquery.value)"» 
«button (click)2"submit(newquery.value)"»Search«/button» 
«/p» 


«div xngIf-"results"» 
«div x«ngIf-z"!results.length"» 
No tracks were found with the term '{{ query ]]' 
«/div» 


«div x«ngIf-"results.length"» 
«hi»Results«/h1» 


«div class="row"> 
«div class-"col-sm-6 col-md-4" xngFor-"let t of results"» 
«div classz"thumbnail"» 
«div classz'content"» 
<img src="{{ t.album.images[0].url )]" class-"img-responsive"» 
«div class-z"caption"» 
«h3» 
«a [routerLink]-"['/artists', t.artists[0].id]"» 
(( t.artists[0].name }} 
«/a» 
«/h3» 
«br» 
<p> 
«a [routerLink]="['/tracks', t.id]"» 
{{ t.name }} 
«/a» 
</p> 
</div> 
<div class="attribution"> 
<h4> 
<a [routerLink]="['/albums', t.album.id]"> 
{{ t.album.name }} 
</a> 
«/h4» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
«/div» 
</div> 
}) 
export class SearchComponent implements OnInit { 
query: string; 
results: Object; 


constructor(private spotify: SpotifyService, 


private router: Router, 
private route: ActivatedRoute) { 


图 灵 社 区 会 员 xiaochao12312312ff(499290328(9 qq.com) zs 尊重 版 权 


7.10 音乐 搜索 应 用 179 





this.route 
.queryParams 
.subscribe(params => { this.query = params['query'] || ''; }); 


} 


ngOnInit(): void { 
this.search(); 


j 


submit(query: string): void { 
this.router.navigate(['search'], { queryParams: { query: query } ]) 
.then(. => this.search() ); 


j 


search(): void { 
console.log('this.query', this.query); 
if (!this.query) ( 
return; 


} 


this.spotify 
.sSearchTrack(this.query) 
.subscribe((res: any) -» this.renderResults(res)); 





j 


renderResults(res: any): void ( 
this.results - null; 
if (res && res.tracks && res.tracks.items) { 
this.results - res.tracks.items; 
j 
j 
j 


7.10.4 ”尝试 搜索 
我 们 已 经 完成 了 搜索 代码 ， 现 在 来 试 一 试 ( 如 图 7-6 所 示 )。 
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Sportify music for active people 


Home Add 


Search 


andre de sapato novo Search 


Results 


BAND» 
anglo, CHORINHO 
S 





Bando De Macambira 


Ordinarius Evandro Do Bandolim 
André do Sapato Novo André de Sapato Novo / Tico Tico no Fubá André De Sapato Novo 
Chorinho Rio de Choro 


Chorinhos De Ouro 


CLARINETES AD LIBITUM 








Pixinguinha 
André de Sapato Novo 


Clarinetes Ad Libitum 


Pixinguinha 
André de Sapato Novo 


Andre De Sapato Novo 


Benedito Lacerda E Pixinguinha Contradanza Latin Jazz Roots 





图 7-6 ”尝试 搜索 
可 以 点 击 艺 术 家 、 曲 目 或 者 专辑 链接 来 导航 到 相应 的 路 由 。 


7.10.5 TrackComponent 





我 们 用 TrackComponent 来 处 理 曲 目 路 由 。 它 显示 曲目 名 字 和 专辑 封面 图 片 ， 并 人 允许 用 户 使 
用 HTMLS 的 audio 标 签 来 进行 试听 。 





code/routes/music/app/ts/components/TrackComponent.ts 
template: ^ 
«div xngIf-"track"» 
«hi»(( track.name }}</h1> 
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«p» 
«img src="{{ track.album.images[1].url }}"> 
</p> 


<p> 
«audio controls src="{{ track.preview url }}"></audio> 
</p> 


<p><a href (click)="back()">Back</a></p> 
</div> 


和 我 们 为 搜索 功能 所 做 的 一 样 ， 在 这 里 使 用 Spotify API。 让 我 们 重 构 searchTrack 方 法 ， 从 
中 提取 两 个 有 用 的 方法 ， 以 供 复 用 。 


code/routes/music/app/ts/services/SpotifyService.ts 





export class SpotifyService { 
static BASE URL: string - 'https://api.spotify.com/v1'; 


constructor(private http: Http) { 
} 


query(URL: string, params?: Array«string»): Observable«any[]» { 
let queryURL: string = ^$(SpotifyService.BASE URLjJ$[URL])'; 
if (params) ( 
queryURL = ^$í(queryURL])?$(params.join('&'))'; 
j 





return this.http.request(queryURL).map((res: any) -» res.json()); 
j 


search(query: string, type: string): Observable«any[]» ( 
return this.query(^/search'^, [ 
`q=${query}`, 
^type-$(type]^ 
1) 
} 


现在 ， 我 们 已 经 将 这 些 方法 分 离 到 Spoti fyService。 注 意 searchTrack 方 法 变 得 简单 多 了 。 


code/routes/music/app/ts/services/SpotifyService.ts 


searchTrack(query: string): Observable«any[]» { 
return this.search(query, 'track'); 


j 
然后 创建 一 个 方法 ， 让 我 们 正在 开发 的 组 件 可 以 根据 曲目 的 id 来 获取 曲目 信息 。 


code/routes/music/app/ts/services/SpotifyService.ts 





getTrack(id: string): Observable«any[]» { 
return this.query(^/tracks/$([id)^); 
j 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 


182 第 7 章 路 由 








最 后 ， 在 TrackComponent 的 新 ngonInit 方 法 中 调用 getTrack。 





code/routes/music/app/ts/components/TrackComponent.ts 


ngOnInit(): void { 
this.spotify 
.getTrack(this.id) 
.subscribe((res: any) => this.renderTrack(res)); 


】 
其 他 组 件 的 工作 原理 很 相似 , 它们 都 使 用 SpotifyService 中 的 get* 方 法 来 根据 id 获取 艺术 家 
或 曲目 信息 。 





7.10.6 ”音乐 搜索 应 用 小 结 


现在 , 我 们 有 了 一 个 比较 实用 的 音乐 搜索 和 预览 应 用 ( 如 图 7-7 所 示 ) 你 可 以 试用 它 并 搜索 
一 些 喜 欢 的 音乐 ! 








It Had To Be You (Big Band and Vocals) 


When army 
Mer sally.. SOS 


r 
PT 


Harry Connick, i Be 






Mj — [ELE DELL] 


Back 


图 7-7 完成 路 由 之 后 


7.11 路 由 器 钩子 

在 变换 路 由 前 , 我们 可 能 想 要 触发 一 些 行 为 。 典 型 的 例子 是 用 户 认 证 。 假 设 我 们 有 登录 路 由 
和 被 保护 的 路 由 。 

我 们 希望 只 有 在 登录 页 面 中 提供 了 正确 的 用 户 名 和 密码 的 时 候 , 才 人 允许 应 用 导航 到 被 保护 的 
路 由 o 

为 了 实现 这 个 功能 , 我 们 需要 连接 到 路 由 的 生命 周期 钩子 , 并 在 激活 被 保护 的 路 由 时 获得 通 
知 。 然 后 调用 一 个 认证 服务 ， 查 询 用 户 是 否 提供 了 正确 的 凭证 。 
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要 检查 一 个 组 件 是 否 可 以 被 激活 ， 我 们 添加 了 一 个 守卫 类 到 路 由 需 配 置 的 canActivate 数 组 。 


让 我 们 再 次 修改 最 初 的 应 用 程序 , 添加 用 户 名 和 密码 输入 框 以 及 一 个 新 的 被 保护 的 路 由 , 该 
路 由 只 在 提供 了 指定 的 用 户 名 和 密码 组 合 后 才能 被 访问 。 





























示例 代码 ”本 节 例 子 的 完整 代码 可 以 在 示例 代码 中 的 routes/auth 目录 中 找到 。 
查阅 README.md 文 件 ， 了 解构 建 和 运行 本 例 的 步骤 。 


7.11.1 AuthService 
我 们 来 创建 一 个 十 分 简单 的 最 小 化 服务 ， 负 责 认 证 和 授权 资源 。 


code/routes/auth/app/ts/services/AuthService.ts 


import { Injectable } from 'Gangular/core'; 


GInjectable() 
export class AuthService { 
login(user: string, password: string): boolean { 
if (user --- 'user' && password --- 'password') { 
localStorage.setltem('username', user); 
return true; 


} 


return false; 


} 


login 方 法 将 在 提供 的 用 户 名 和 密码 为 'user' 和 'password' 时 返回 true。 此 外 ,在 它们 匹配 
使 用 localStorage 来 保存 用 户 名 。 它 标志 着 应 用 程序 是 否 有 一 个 仍然 活跃 的 已 登录 用 户 。 


























时 


O 如 果 你 不 熟悉 ,这 里 解释 一 下 : localStorage 是 HTML5 提 供 的 键 值 对 ， 用 来 在 
浏览 | 览 器 e 中 保存 信息 ^O 





它 的 API 非 常 简 单 ， 仅 仅 包 含 了 设置 、 读 取 和 删除 里 面 项 目的 方法 。 
参见 MDN 上 的 Storage 文 档 ?" 查 看 详情 。 
logout 方 法 清除 了 username 值 。 








code/routes/auth/app/ts/services/AuthService.ts 


logout(): any ( 
localStorage.removeItem( 'username'); 


} 





(D https://developer.mozilla.org/en-US/docs/Web/API/Storage 
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最 后 两 个 方法 是 : 


Q getUser, 返回 用 户 名 或 者 null; 
O isLoggedIn， 使 用 getUser( ) 并 在 有 用 户 时 返回 true。 


下 面 是 这 些 方 法 的 代码 。 


code/routes/auth/app/ts/services/AuthService.ts 








getUser(): any { 
return localStorage.getItem('username'); 


} 


isLoggedIn(): boolean { 
return this.getUser() !== null; 


} 
最 后 一 件 要 做 的 事 是 导出 一 个 AUTH_PROVIDERS ， 这 样 可 以 将 其 注入 到 应 用 中 。 











code/routes/auth/app/ts/services/AuthService.ts 


export var AUTH PROVIDERS: Array«any» = [ 
{ provide: AuthService, useClass: AuthService ] 





]; 











至 此 ， 我 们 有 了 用 于 注入 到 组 件 的 AuthService 服 务 ， 可 以 实现 用 户 登 录 、 检 查 当 前 登录 用 


户 和 用 户 登 出 等 。 





随后 ， 我 们 还 将 在 路 由 器 中 使 用 它 来 保护 ProtectedComponent 。 不 过 我 们 首先 创建 用 于 登 


录 的 组 件 。 


7.11.2 LoginComponent 














这 个 组 件 将 在 没有 登录 用 户 的 时 候 显示 登录 表单 , 或 者 显示 一 条 包含 了 用 户 信 ， 
的 小 横幅 。 
下 面 是 logi n 和 1ogout 方 法 的 代码 。 


code/routes/auth/app/ts/components/LoginComponent.ts 





export class LoginComponent { 
message: string; 


constructor(private authService: AuthService) [f 
this.message - ''; 


} 


login(username: string, password: string): boolean { 
this.message = ''; 
if (!this.authService.login(username, password)) { 
this.message - 'Incorrect credentials.'; 
setTimeout(function() { 
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this.message = ''; 
).bind(this), 2500); 
j 


return false; 


ogout(): boolean { 
this.authService.logout(); 
return false; 





在 服务 验证 用 户 凭证 后 ， 我 们 就 登 和 用户。 
根据 用 户 的 登录 状态 ， 组 件 模板 中 有 两 段 代码 片段 分 别 被 显示 出 来 。 


第 一 段 是 登录 表单 ， 受 到 *kngIf="!authService.getUser()" 保 护 。 











code/routes/auth/app/ts/components/LoginComponent.ts 


«form class="form-inline" xngIf-"!authService.getUser()"» 
«div class-"form-group"» 
«label for-z"username"»User:«/label» 
«input class-"form-control" name-"username" susername» 
«/div» 


«div class-"form-group"» 

«label forz"password"»Password:«/label» 

«input class-"form-control" type="password" name-"password" spassword» 
«/div» 


«a class="btn btn-default" (click)-2"login(username.value, password.value)"» 
Submit 
«/a» 
«/ form» 


第 二 段 是 信息 横幅 ， 包 含 了 登 出 链接 ， 受 到 相反 的 xngIf="authService.getUser()" 保 护 。 


code/routes/auth/app/ts/components/Login Component.ts 





«div class="well" xngIf-"authService.getUser()"» 
Logged in as <b>{{ authService.getUser() }}</b> 
«a href (click)-"logout()"»Log out«/a» 

«/div» 


另外， 在 出 现 验 证 错误 时 ,会 显示 一 段 代码 片段 。 


code/routes/auth/app/ts/components/LoginComponent.ts 


«div class="alert alert-danger" role-"alert" *nglf="message"> 
{{ message }} 
«/div» 


现在 我 们 就 可 以 处 理 用 户 登录 了 ， 接 下 来 创建 想 要 被 用 户 登 录 保护 的 资源 。 
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7.11.3 ProtectedComponent 组 件 和 路 由 守卫 


1. ProtectedComponent 
要 保护 组 件 ， 必 先 有 组 件 。ProtectedComponent 组 件 很 简明 。 


code/routes/auth/app/ts/components/Protected Component.ts 
/* 


* Angular 
*/ 


import {Component} from 'Gangular/core'; 
GComponent ( { 


selector: 'protected', 
template: ^«hi1»Protected content«/h1»^ 


}) 

ion class ProtectedComponent ( 

我 们 希望 只 有 登录 的 用 户 可 以 访问 这 个 组 件 。 但 是 如 何 才能 做 到 呢 ? 

答案 是 使 用 路 由 器 钧 子 canActivate ， 连 接 到 一 个 实现 CanActivate 接 口 的 守卫 类 。 
2. LoggedInGuard 守 卫 

新 建 一 个 名 为 guards 的 目录 ， 然 后 新 建 loggedIn.guard.ts 文 件 。 


code/routes/auth/app/ts/guards/loggedIn.guard.ts 

















import { Injectable } from 'Gangular/core'; 

import { CanActivate } from 'Gangular/router'; 

import { AuthService } from 'services/AuthService'; 

GInjectable() 

export class LoggedInGuard implements CanActivate { 
constructor(private authService: AuthService) {} 


canActivate(): boolean { 
return this.authService.isLoggedIn(); 
j 
j 


该 守卫 声明 了 它 实 现 CanActivate 接 口 。 可 以 通过 实现 canActivate 方 法 满足 这 个 声明 。 
我 们 注入 AuthService 到 这 个 类 的 构造 函数 ， 并 将 其 保存 到 私有 变量 authService。 

在 canActivate 函 数 中 ， 我 们 通过 this.AuthService 来 检查 用 户 的 登录 状态 isLoggedIn。 
3. 配置 路 由 器 

为 了 使 用 这 个 守卫 ， 我 们 需要 这 样 配置 路 由 器 : 

(1) S ALoggedInGuard; 
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(2) 在 路 由 配置 中 使 用 LoggedInGuard; 

(3) 添加 LoggedInGuard 到 提供 者 列表 中 ( 这 样 它 就 可 以 被 注入 了 )。 
我 们 在 app.ts 中 实现 以 上 步 又 。 

首先 导入 LoggedInGuard。 


code/routes/auth/app/ts/app.ts 





import {AUTH_PROVIDERS} from 'services/AuthService'; 
import ([LoggedInGuard] from 'guards/loggedIn.guard'; 


然后 将 带 有 守卫 的 canActivate 添 加 到 被 保护 的 路 由 。 


code/routes/auth/app/ts/app.ts 








const routes: Routes - [ 


{ path: '', redirectTo: 'home', pathMatch: 'full' ], 
{ path: 'home', component: HomeComponent }, 

{ path: 'about', component: AboutComponent }, 

{ path: 'contact', component: ContactComponent }, 

{ path: 'protected', component: ProtectedComponent, 





canActivate: [LoggedInGuard] } 
]; 


最 后 将 LoggedInGuard 添 加 到 提供 者 列表 中 。 


code/routes/auth/app/ts/app.ts 


providers: [ 
AUTH, PROVIDERS, 
LoggedInGuard, 
{ provide: LocationStrategy, useClass: HashLocationStrategy }, 


] 
4. 用 户 登 录 
我 们 必须 添加 : 


code/routes/auth/app/ts/app.ts 


import (LoginComponent] from 'components/LoginComponent'; 
然后 添加 : 

(D) 一 个 新 链接 ， 指 向 被 保护 的 路 由 ; 

(2) clogin> 标 签到 模板 中 ， 用 来 演 染 新 组 件 。 

下 面 是 app.ts 的 代码 。 


code/routes/auth/app/ts/app.ts 





@Component( { 
selector: 'router-app', 
template: ` 
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«div class-"page-header"» 
«div classz'"container"» 
«hi»Router Sample«/h1» 
«div class-"navLinks"» 
«a [routerLink]-2"['/home' ] "»Home«/a» 
«a [routerLink]-"['/about']"»About«/a» 
«a [routerLink]-"['/contact']"»Contact Us«/a» 
«a [routerLink]-2"['/protected']"»Protected«/a» 
«/div» 
«/div» 
«/div» 


«div idz"content"» 
«div classz"container"» 


«login»«/login» 
«hr» 


«router-outlet»«/router-outlet» 
«/div» 
«/div» 


p 
class RoutesDemoApp { 
constructor(private router: Router) { 


现在 ， 在 浏览 需 打 开 应 用 时 ， 我 们 可 以 看 到 新 的 登录 表单 和 被 保护 的 链接 C 如 图 7-8 所 示 )。 








© € € / D ngbook 2: Angular 2 HTT: x - ae 
€ > Q D localhost:8080/#/home 0:*90uo)yoodos 
Router Sample 
Home About Contact us Protected 
User: Password: Submit 
Welcome! 


























图 7-8 ”认证 应 用 : 初始 页 
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如 果 点 击 被 保护 的 链接 , 什么 也 不 会 发 生 。 手动 访问 http://localhost:8080/#/protected 的 效果 也 
是 一 样 o 

在 表单 中 输入 用 户 名 和 密码 ,点 击 Submit 按 钮 。 你 将 看 到 一 条 显示 了 当前 用 户 的 横幅 ( 如 图 
7-9 所 示 )。 





Q9 0 € / 门 ngbook2:Angular2Rou x Felipe 


€ > CŒ [D localhost:8080/#/home 0:*e€eouoooos 





Router Sample 


Home About Contact us Protected 


Logged in as user Log out 


Welcome! 

















图 7-9 ”认证 应 用 : 登录 后 


正如 我 们 所 料 ， 在 点 击 被 保护 的 链接 时 ,我们 被 重 定向 了 ,而且 组 件 也 被 演 染 了 ( 如 图 7-10 
所 示 )。 

















A 安全 注意 事项 : 在 过 于 依赖 客户 端 路 由 保护 为 我 们 提供 安全 性 之 前 ， 理 解 它 的 
工作 机 制 是 至 关 重 要 的 。 实 际 上 ， 你 应 该 把 客户 端 路 由 保护 看 作用 户 体验 的 一 

种 形式 ， 而 不 是 安全 的 一 种 形式 。 
归根 到 底 ， 应 用 的 所 有 JavaScript 代 码 都 会 服务 于 客户 端 。 不 管用 户 是 否 已 经 登 
录 ， 这 些 代码 都 能 被 检测 到 。 
因此 ， 如 果 有 敏感 数据 需要 保护 ， 你 必须 使 用 服务 器 端 认 证 来 保护 它们 。 也 就 
是 说 , 对 每 条 查询 数据 的 请 求 ,都 要 求 用 户 提 供 一 个 服务 器 验证 的 有 效 API 密 钠 
(或 者 认证 令 牌 )。 
构建 完整 的 认证 系统 超出 了 本 书 的 范围 。 最 重要 的 是 要 明白 ， 在 客户 端 保护 路 
由 并 不 一 定 会 阻挡 任何 人 查看 这 些 路 由 背后 的 JavaScript 页 面 。 
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9 C (0 ng-book 2: Angular 2 N 
E C | (5 localhost:8080/#/protected 





Router Sample 


Home About Contact us Protected 


Logged in as user Log out 


Protected content 





x 

















FE 应用: 受 保 护 区 


y 








图 7-10 Ù 








7.12 REKHA 
藤 套 路 由 是 在 一 些 路 由 中 包含 其 他 路 由 。 利 用 明 套 路 由 ,我 们 可 以 封装 父 级 路 由 的 功能 ,并 





在 它 的 子 级 路 由 中 使 月 





这些 功 能 。 
假设 我 们 有 个 网 站 ， 它 有 一 个 “我 们 是 谁 ? ”区 域 ， 允许 用 户 了 解 我 们 的 团队 。 它 还 有 一 个 























叫 作 “产品 ”的 区 域 。 

我 们 可 能 认为 “我 们 是 谁 ? ”的 完美 路 由 是 /about, “产品 ”的 完美 路 由 是 /products。 
然后 ， 在 访问 这 些 区 域 时 ， 我 们 很 高 兴 地 显示 了 所 有 团队 和 所 有 产品 。 

但 是 , 如 果 随 着 网 站 的 成 长 , 我们 需要 显示 团队 中 每 个 人 的 个 人 信息 以 及 每 种 产品 的 信息 该 
































怎么 办 ? 
为 了 支持 这 种 情况 ， 路 由 带 要 允许 用 户 定义 髓 套路 由 。 
你 可 以 有 多 重 骨 套 的 router-outlet。 这 样 ， 应 用 的 每 个 区 域 都 可 以 有 自己 的 子 组 件 ， 这 些 

















组 件 也 可 以 有 自己 的 router-outlet。 
下 面 用 一 个 示例 进行 讲解 。 
在 本 例 中 , 我 们 有 一 个 产品 区 , 用 户 在 其 中 可 以 通过 访问 一 个 特殊 的 URL 查 看 两 种 推荐 的 产 
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品 。 对 于 其 他 的 产品 ， 路 由 会 使 用 产品 ID。 


示例 代码 ”本 节 例 子 的 完整 代码 可 以 在 示例 代码 中 的 routes/nested 目 录 中 找到 。 
查阅 README.md 文 件 ， 了 解构 建 和 运行 本 例 的 步骤 。 


7.12.1 配置 路 由 
首先 在 app.ts 文 件 中 描述 两 种 顶级 路 由 。 


code/routes/nested/app/ts/app.ts 


const routes: Routes - [ 

{ path: '', redirectTo: 'home', pathMatch: 'full' }, 

{ path: 'home', component: HomeComponent j, 

{ path: 'products', component: ProductsComponent, children: childRoutes } 


]; 
home 路 由 看 起 来 很 眼熟 ;注意 prodqucts 有 个 chi ldren 参 数 。 它 是 从 哪儿 来 的 ?我 们 在 定义 
ProductsComponent 时 定义 了 childRoutes。 


























7.12.2 ProductsComponent 组 件 
这 个 组 件 有 自己 的 路 由 配置 。 


code/routes/nested/app/ts/components/ProductsComponent.ts 


export const routes: Routes - [ 

{ path: '', redirectTo: 'main',pathMatch: 'full'j, 
{ path: 'main', component: MainComponent j, 

{ path: ':id', component: ByIdComponent }, 

{ path: 'interest', component: InterestComponent }, 
{ path: 'sportify', component: SportifyComponent }, 
]; 


注意 , 在 第 一 个 对 象 上 面 有 个 空 的 path。 这么 做 是 为 了 在 访问 /products 时 重 定向 到 main 路 由 。 

我 们 要 看 的 另 一 个 路 由 是 :idq。 在 这 种 情况 下 ， 当 用 户 访问 一 些 没 有 可 以 匹配 的 路 由 时 ， 此 
路 由 就 会 垫底 。 在 /之 后 传 进来 的 一 切 都 将 被 提取 为 路 由 的 参数 ， 即 idq。 

然后 在 组 件 的 路 由 咒 中 为 每 种 静态 子路 由 添加 一 个 链接 。 


code/routes/nested/app/ts/components/ProductsComponent.ts 




















«a [routerLink]-2"['./main']"»Main«/a» | 
«a [routerLink]-2"['./interest']"»Interest«/a» | 
«a [routerLink]-2"['./sportify']"»Sportify«/a» | 




















可 以 看 到 路 由 链接 的 格式 都 是 [' ./main'] ， 前 面 有 ./。 它 表明 了 导航 到 main 路 由 是 相对 于 
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当前 路 由 上 下 文 的 。 

你 也 可 以 用 ['products'，'main'] 的 形式 声明 路 由 。 这 么 做 的 坏处 是 ， 子 路 由 知晓 父 路 由 ; 
如 果 想 要 移动 或 者 复 用 该 组 件 ， 可 能 需要 重新 编写 路 由 链接 。 

添加 链接 后 , 我 们 添加 一 个 输入 框 让 用 户 可 以 输入 产品 ID , 以 及 一 个 按钮 在 点 击 后 导航 到 该 
产品 。 最 后 添加 了 router-outlet。 
































code/routes/nested/app/ts/components/ProductsComponent.ts 


template: ^ 
«h2»Products«/h2» 


«div class-"navLinks"» 


«a [routerLink]-2"['./main']"»Main«/a» | 
«a [routerLink]-2"['./interest']"»Interest«/a» | 
«a [routerLink]-2"['./sportify']"»Sportify«/a» | 


Enter id: «input sid size-z"6"» 
«button (click)-"goToProduct(id.value)"»Go«/button» 
«/div» 


«div class-"products-area"» 
«router-outlet»«/router-outlet» 
«/div» 


让 我 们 看 看 ProductsComponent 的 代码 。 


code/routes/nested/app/ts/components/ProductsComponent.ts 


export class ProductsComponent { 
constructor(private router: Router, private route: ActivatedRoute) { 


} 


goToProduct(id:string): void { 
this.router.navigate(['./', id], {relativeTo: this.route]); 


} 
} 


首先 , 我 们 在 构造 函数 中 声明 了 一 个 Router 的 实例 变量 ， 因 为 我 们 将 使 用 该 实例 来 通过 id 导 
航 到 产品 。 

想 要 查看 某 产品 时 ， 我 们 使 用 goToProduect 方 法 。 在 goToProduct 方 法 中 ， 我 们 调用 路 由 器 
的 navigate 方 法 并 提供 路 由 名 字 和 包含 路 由 参数 的 对 象 。 在 本 例 中 ， 我 们 简单 地 传递 了 id。 
注意 ， 我 们 在 navigate 函数 中 使 用 相对 路 径 ./。 为 了 使 用 相对 路 径 ， 我 们 还 要 将 一 个 
relativeTo 对 象 作为 选项 传人 ， 它 告诉 路 由 器 究竟 是 相对 于 哪个 路 由 。 


运行 应 用 程序 ， 我 们 将 看 到 主页 ， 如 图 7-11 所 示 。 
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Foe] 
oe5*eeouomouos 


@ © @ [ngbook2:Anguar2Rou x 








€ > CŒ D localhost:8080/#/home 





Router Sample 


Home Products 


Welcome! 














图 7-11 REW H 
如 果 点 击 产 品 链接 ， 你 将 被 重 定向 到 /products/main， 如 图 7-12 所 示 。 





| Felipe. 
ex*-Guoodos| 


@ CO / [M ng-book 2: Angular 2 Roui: x 








€ 3 C |D localhost:8080/#/products/main 





Router Sample 


Home Products 


Products 


Main | Interest | Sportify | Enter id: | Go 


Welcome to the products section. Please select a product above. 














Kd7-12. HREEREHMRBI: 产品 区 
灰色 细 线 下 面 的 所 有 内 容 都 是 使 用 主 应 用 的 router-outlet 来 泻 染 的 。 
虚线 方 框 里 面 的 内 容 是 在 ProductComponent 的 router-outlet 中 泻 染 的 。 这 就 是 配置 父 级 和 
子 级 路 由 分 别 进行 泻 染 的 方法 。 
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当 访 问 其 中 一 个 产品 链接 时 ， 或 者 在 文本 框 中 输入 id 并 点 击 Go 按 钮 后 ， 新 的 内 容 将 在 
ProductComponent 组 件 中 的 路 由 出 口中 泻 染 ( 如 图 7-13 所 示 )。 


ece ng-book 2: Angular 2 Rou x Felipe 


€ > C [D localhost:8080/#/products/abo123 o:**oGuogoguos 





Router Sample 


Products 


Main | Interest | Sportify | Enter id: abct23 | Go 


You selected product: abc123 











图 7-13” 骸 套路 由 应 用 : 按 ID 查 询 产 品 


另外 ,值得 注意 的 是 Angular 的 路 由 需 很 智能 , 它 会 优先 使 用 具体 路 由 ( 比如 /products/spotify ), 
然后 才 使 用 参数 化 的 路 由 ( 比如 /products/123 ) 这样，/products/sportify 将 不 会 被 更 加 通用 的 、 捕 
捉 所 有 路 由 的 /products/:id 处 理 。 

藤 套 路 由 的 重 定 向 和 链接 

作为 回顾 ， 我 们 使 用 ['myRoute '] 来 导航 到 名 为 MyRoute 的 顶级 路 由 。 但 是 ， 只 有 当 你 在 同 
样 的 顶级 上 下 文中 时 ， 这 种 方法 才 可 行 。 

ETRAF, 如 果 你 试图 链接 或 重 定向 到 ['myRoute'] , 路 由 需 将 试图 寻找 一 个 兄弟 路 由 ， 
故而 出 错 。 在 这 种 情况 下 ， 使 用 以 斜 杠 开头 的 [' /myRoute']。 

同样 ,在 顶级 上 下 文中 ， 如 果 想 要 链接 或 重 定向 到 一 个 子 级 路 由 ， 我 们 需要 使 用 路 由 定义 数 
组 的 多 个 元 素 。 

假设 我 们 想 要 访问 Show 路 由 ; 它 是 Product 路 由 的 子 级 。 在 这 种 情况 下 ,我 们 使 用 ['product ' ， 
'show'], ， 正 如 路 由 定义 所 示 。 













































































7.13 ”总结 


正如 我 们 所 看 到 的 ， 全 新 的 Angular 路 由 带 非 常 强 大 和 灵活 。 现 在 就 在 你 的 应 用 中 使 用 路 由 
di BL! 
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依赖 注入 








随 着 程序 规模 的 增长 ， 我 们 常常 遇 到 应 用 模块 需要 相互 通信 的 情况 。 当 模块 A 需 要 模块 B 才 
能 运行 时 ， 我 们 就 说 B 是 A 的 依赖 。 




















获取 依赖 的 最 常见 方式 之 一 就 是 直接 导入 ( import ) 一 个 文件 。 例如， 在 某 个 假想 模块 中 ， 
我 们 可 以 这 么 做 : 

// in A.ts 

import (Bj from 'B'; // a dependency! 





B.foo(); // using B 





通常 ， 只 要 导入 其 他 代码 就 足够 了 ; 但 是 在 某 些 情况 下 ， 要 用 到 更 加 精巧 的 方式 提供 依赖 。 
口 如 果 我 们 想 在 测试 时 把 B 的 实现 替换 为 MockB ， 该 怎么 办 呢 ? 

口 如 果 我 们 想 在 整个 应 用 中 共享 B 类 的 单一 实例 C 比如 单 例 模 式 )， 该 怎么 办 呢 ? 

口 如 果 我 们 想 在 每 次 用 到 8B 类 时 都 创建 一 个 新 实例 ( 比如 工厂 模式 )， 该 怎么 办 呢 ? 

依赖 注入 可 以 解决 这 些 问题 。 























依赖 注入 (dependency injection, DI) 是 这 样 一 个 系统 : 它 让 程序 中 的 某 部 分 可 以 访问 其 他 
部 分 ， 而 且 我 们 可 以 配置 它们 的 访问 方式 。 





Qs 可 以 把 注入 器 看 作 new 操 作 符 的 替代 品 。 


依赖 注入 这 个 术语 既 被 用 来 描述 一 种 设计 模式 C 可 用 于 很 多 种 框架 )， 也 被 用 来 指 代 Angular 
内 置 的 DI 实现 库 。 

















使 用 依赖 注入 技术 的 主要 优点 是 客户 代码 不 必 知 晓 如 何 创 建 依赖 , 它们 只 需要 与 那些 依赖 交 
互 就 可 以 了 。 
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8.1 注入 示例 : PriceService 


假设 我 们 有 一 个 Product 类 。 每 个 产品 都 有 一 个 基准 价格 。 我 们 要 靠 一 个 服务 来 计算 该 产品 
的 含 税 价 ， 它 需要 如 下 输入 : 
口 产品 的 基准 价格 
口 销售 时 所 在 的 州 ” 


下 面 是 不 使 用 依赖 注入 时 的 代码: 


class Product { 
constructor(basePrice: number) { 
this.service = new PriceService(); 
this.basePrice - basePrice; 


} 























price(state: string) { 
return this.service.calculate(this.basePrice, state); 
} 
} 
想象 一 下 , 我们 要 为 此 Product 类 写 一 个 测试 。 假设 这 个 PriceService 类 要 使 用 数据 库 查 询 
来 获得 产品 在 指定 州 的 税率 。 如 果 这 样 写 测试 的 话 : 


let product; 





beforeEach(() => ( 
product - new Product(11); 


; 
describe('price', () => { 

it('is calculated based on the basePrice and the state', () => { 
expect(product.price('FL')).toBe(11.66); 


D; 
}) 


尽管 这 个 测试 可 以 工作 , 但 是 暴露 了 一 些 缺 陷 。 为 了 让 这 个 测试 成 功 运行 , 需要 满足 两 个 前 
提 条 件 : 


(1) 数据 库 必 须 保 持 运 行 ; 
(2) 佛罗里达 州 ( 代号 FL ) 的 税率 必须 始终 像 我 们 期 望 的 一 样 。 


根本 原因 在 于 : Product 类 和 PriceService 类 (而 它 又 依赖 于 数据 库 ) 之 间 突 无 的 强烈 依赖 
会 让 我 们 的 测试 变 得 更 脆弱 。 
如 果 稍 微 改 写 一 下 Product 类 呢 ? 

















中 在 





天国， 不 同 州 的 税率 有 所 不 同 。 一 一 译 者 注 
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class Product { 
constructor (service: PriceService, basePrice: number) { 
this.service = service; 
this.basePrice = basePrice; 


j 


price(state: string) { 
return this.service.calculate(this.basePrice, state); 
} 
} 


现在 ， 当 要 创建 Product 的 实例 时 ， 客 户 方 代码 可 以 决定 把 PriceService 的 哪个 具体 实现 传 
给 这 个 新 实例 了 。 


这 样 ， 只 要 创建 一 个 mock 版 本 的 PriceService 类 就 可 以 大 幅 简 化 测试 了 : 


class MockPriceService { 
calculate(basePrice: number, state: string) { 
if (state === 'FL') { 
return basePrice x 1.06; 


} 











return basePrice; 
j 
j 


基于 这 个 小 改动 ， 我 们 就 可 以 微调 测试 ， 移 除 它 对 数据 库 的 依赖 : 


let product; 





beforeEach(() => { 
const service = new MockPriceService(); 
product - new Product(service, 11); 


}); 


describe('price', () => { 
it('is calculated based on the basePrice and the state', () => { 
expect(product.price('FL')).toBe(11.66); 
2); 
}) 


另 一 个 好 处 是 我 们 现在 能 更 加 确信 自己 正在 不 受 外 界 影响 地 测试 Product 类 。 也 就 是 说 ， 我 
们 能 确保 该 类 正在 使 用 一 个 行为 上 可 预测 的 依赖 。 





82 “ 别 打 给 我 们 ……” 


这 种 注入 依赖 的 技术 是 基于 一 项 被 称 为 控制 反 转 的 设计 原则 。 
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控制 反 转 (inversion of control, IoC) 原则 的 非 正 式 称谓 是 “好 莱 雹 法 则 ”。 它 
来 自 好 莱 坞 的 一 名 常用 语 “ 别 打 给 我 们 ， 我 们 会 打 给 你 (don'tcall us, we'll call 


you y o 


多 年 以 来 ， 它 在 与 全 应 用 语 境 相 关 的 部 件 GE RE. 、 管 道 等 Angular 代 码 块 ) 中 用 得 
非常 普遍 ， 也 常 被 用 来 解决 依赖 的 创建 和 设置 问题 。 这 一 点 在 例子 中 体现 得 很 清楚 : Product 类 
不 得 不 了 解 PriceService 类 。 

问题 在 于 , 一 旦 部 件 变 得 过 于 关心 它 的 依赖 ,部 件 本 身 就 会 变 得 脆弱 而 难以 修改 。 如 果 我 们 
修改 了 一 个 部 件 , 这 项 修改 就 会 向 上 扩散 到 所 有 依赖 它 的 部 件 中 。 它 会 影响 到 程序 中 很 多 不 同 的 
区 域 ， 甚 至 可 能 超出 程序 的 边界 。 换 句 话 说 ， 这 些 部 件 之 间 产 生 了 紧 厅 合 。 

使 用 依赖 注入 ,我们 就 可 以 得 到 一 个 更 加 松 耦 合 的 架构 。 这 时 ， 当 修改 单一 部 件 时 ， 对 程序 
中 其 他 区 域 的 影响 就 小 多 了 。 同 时 ， 只 要 这 些 部 件 之 间 的 接口 没有 变 , 我 们 甚至 可 以 在 不 修改 其 
他 部 件 中 实现 代码 的 情况 下 集体 更 换 它们 。 

Angular 从 AngularJS 中 继承 来 的 一 项 伟大 特性 就 是 它们 都 使 用 这 种 控制 反 转 模式 。Angular 使 
用 自 带 的 依赖 注入 机 制 来 解析 这 些 依 赖 。 

在 传统 方式 下 ， 如 果 部 件 A 需 要 依赖 部 件 B， 那 就 意味 着 A 要 在 内 部 创建 一 个 B 的 实例 ， 也 就 
是 A 依赖 于 B( 如 图 8-1 所 示 )。 


创建 实例 
依赖 于 


图 8-1 不 用 依赖 注入 框架 时 


Angular 利 用 依赖 注入 机 制 改变 了 这 一 点 。 在 这 种 机 制 下 ， 如 果 需 要 在 部 件 A 中 用 到 部 件 B， 
我 们 就 应 该 期 待 B 被 传 给 A( 如 图 8-2 所 示 )。 


ES 


1. 得 到 注册 2. 声明 对 B 的 依赖 
cE 
DI 
















































































框架 3. 注 入 B 














图 8-2 ”使 用 依赖 注入 框架 时 
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在 传统 场景 下 ， 这 带 来 了 很 多 优点 。 一 个 优点 就 是 : 如 果 我 们 准备 单独 测试 A， 可 以 创建 一 
个 mock 版 本 的 B， 并 把 它 注 入 到 A 中 。 

在 本 书 的 前 面 ， 我 们 已 经 多 次 用 过 服务 和 依赖 注入 了 ， 比 如 在 第 7 章 创 建 音 乐 应 用 时 。 为 了 
与 Spotify API 交 互 ， 我 们 创建 了 SpotifyService。 它 被 注入 到 了 很 多 部 件 中 ， 比 如 下 面 这 个 来 自 
AlbumComponent 的 片段 。 


code/routes/music/app/ts/components/AlbumComponent.ts 


export class AlbumComponent implements OnInit { 
id: string; 
album: Object; 


constructor(private route: ActivatedRoute, 
private spotify: SpotifyService, // «-- injected 
private location: Location) { 
route.params.subscribe(params => ( this.id = params['id']; )); 


j 
现在 ， 我 们 就 来 学 习 如 何 创建 自己 的 服务 以 及 能 用 哪些 形式 注入 它们 吧 。 


8.3 依赖 注入 的 部 件 ri 
要 注册 一 个 依赖 , 我 们 就 得 找到 一 些 东西 作为 那个 依赖 的 标识 。 这 个 标识 被 称 为 依赖 的 令 牌 

(token )。 比 如 ， 如 果 我 们 想 要 注册 某 个 API 的 URL ， 就 可 以 用 字符 串 API_URL 作 为 令 牌 。 同 样 ， 

如 果 我 们 要 注册 一 个 类 ， 就 可 以 使 用 这 个 类 本 身 作 为 它 的 令 牌 ， 就 像 我们 即将 看 到 的 。 
在 Angular 中 ， 依 赖 注入 包括 如 下 三 部 分 。 

O 提供 者 (也 常 被 称 为 绑 定 ) 负责 把 一 个 令 牌 (可 能 是 字符 串 也 可 能 是 类 ) 映射 到 一 个 依 

赖 的 列表 。 它 告诉 Angular 该 如 何 根据 指定 的 令 牌 创建 对 象 。 

口 注入 器 负责 持 有 一 组 绑 定 ; 当 外 界 要 求 创建 对 象 时 ， 解 析 这 些 依 赖 并 注入 它们 。 

口 依赖 就 是 将 被 用 于 注入 的 对 象 。 

我 们 可 以 借助 图 8-3 来 理解 它们 各 自 扮演 的 角色 。 























提供 者 


注册 解析 





图 8-3 ”依赖 注入 





图 灵 社 区 会 员 xiaochao12312312ff(499290328(9 qq.com) 专 享 尊重 版 权 


200 第 8 章 依赖 注入 





与 依赖 注入 打交道 时 ， 有 很 多 不 同 的 选项 ， 我 们 来 分 别 看 看 它们 的 用 途 。 


最 常见 的 情况 是 提供 一 个 服务 或 值 ， 它 将 在 整个 应 应 用 中 保持 一 致 。 在 我 们 的 应 用 中 ，99% 的 
场景 可 能 都 属于 这 种 情况 。 


既然 这 就 是 我 们 要 做 的 一 切 , 那 就 在 下 一 节 示 范 怎 样 写 一 个 基本 的 服务 吧 , 因为 它 正 是 我 们 
在 开发 大 多 数 应 用 的 大 部 分 时 间 里 所 需要 的 。 


说 的 够 多 了 ， 开 始 编码 ! 









































8.4 ”尝试 注入 器 


就 像 前 面 提 到 过 的 ，Angular 会 在 幕后 帮 有 我 们 设置 好 依赖 注入 。 不 过 ， 在 我 们 和 注解 打交道 
并 且 把 依赖 注入 集成 到 部 件 中 之 前 ， 自 己 先 尝试 使 用 一 下 注入 器 


先 来 创建 一 个 直接 返回 字符 串 的 示例 服务 。 


code/dependency injection/injector/app/ts/app.ts 
/* 
* The injectable service 
*/ 
class MyService { 
getValue(): string { 
return 'a value'; 


} 
} 


接 下 来 ,创建 该 应 用 的 组 件 。 


code/dependency injection/injector/app/ts/app.ts 























GComponent( { 
selector: 'di-sample-app', 
template: ^ 
«button (click)z"invokeService()"»Get Value«/button» 


}) 
class DiSampleApp { 
myService: MyService; 


constructor() { 
let injector: any = ReflectiveInjector.resolveAndCreate( [MyService]); 
this.myService - injector.get(MyService); 
console.log('Same instance?', this.myService --- injector.get(MyService)); 


} 





invokeService(): void { 
console.log('MyService returned', this.myService.getValue()); 
j 
j 
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下 面 对 这 个 过 程 进行 分 解 。 我 们 首先 声明 了 DiSsampleApp 组 件 ， 它 会 泻 染 出 一 个 按钮 。 当 点 
击 此 按钮 时 就 会 调用 invokeService 方 法 。 


子 细 看 该 组 件 的 构造 函数 就 会 发 现 ， 我 们 正在 使 用 一 个 来 自 ReflectiveInjector 的 静态 方 
法 ， 名 为 resolveAndCreate。 该 方法 负责 创建 一 个 新 的 注入 器 。 我 们 传 给 它 的 参数 是 一 个 数组 ， 
其 中 是 这 个 新 注入 器 需要 知道 的 可 供 注 入 物 。 在 这 个 例子 中 ， 它 知道 Myservice 这 个 可 注入 物 就 
ET. 








e ReflectiveInjector 是 Injector 的 一 个 具体 实现 ， 它 使 用 反射 ( reflection ) 机 
制 来 找 出 正确 的 参数 类 型 。 虽 然 也 有 一 些 别 的 注入 器 ， 不 过 在 大 多 数 应 用 中 ， 
ReflectiveInjector 应 该 是 最 常用 的 “常规 ”注入 器 了 。 





需要 注意 的 一 点 是 : 它 会 注入 该 类 的 一 个 单 合 对 象 。 


这 可 以 从 构造 函数 中 的 最 后 两 行 得 到 验证 。 首 先 要 求 刚 创建 的 注入 器 给 我 们 一 个 MyService 
类 的 实例 ， 然后 把 它 存 人 组 件 的 myService 字 段 。 之 后 ， 在 console.1og 函 数 中 要 求 注入 器 再 次 
给 我 们 一 个 MyService 的 实例 ， 并 输出 它 与 nyService 字 段 进行 比较 的 结果 : 





























console.log('Same instance?', this.myService === injector.get(MyService)); CEN 
我 们 可 以 在 控制 台中 确认 这 两 个 实例 确实 是 指向 同一 个 对 象 的 引用 : 





Same instance? true 


注意 ， 由 于 使 用 了 自己 的 注入 器 ， 我 们 并 不 需要 在 启动 时 把 MyService 加 入 NgModule 的 
providers 列 表 中 。 


code/dependency injection/injector/app/ts/app.ts 


GNgModule(Í 
declarations: [ DiSampleApp ], 
imports: [ BrowserModule ], 
bootstrap: [ DiSampleApp ] 


I» 
class DiSampleAppModule {} 


platformBrowserDynamic().bootstrapModule(DiSampleAppModule); 


8.5 FH NgModule 提供 依赖 


不 过 ， 在 正常 情况 下 ， 还 是 得 告诉 NgModule 要 注入 哪些 提供 者 。 
比如 ， 我 们 想 让 该 MyService 单 例 对 象 在 整个 应 用 中 都 能 被 注入 。 
为 了 能 够 注入 ， 必 须 把 它们 添加 到 NgModule 的 providers 属 性 中 。 示 例 代 码 如 下 : 


@NgModule({ 

















图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


202 第 8 章 依赖 注入 





declarations: [ 
MyAppComponent, 
// other components ... 


] 


providers: [ MyService ] // «-—- here 


I» 
class MyAppModule {} 


这 样 ，MyAppComponent 就 能 把 MyService 注 人 构造 函数 中 了 : 
export class MyAppComponent { 


constructor(private myService: MyService /x «-- injected x/) { 
// do something with myService here 


} 


Zs 
} 


当 我 们 把 这 个 类 本 身 放 进 providers 中 时 : 
providers: [ MyService ] 

就 是 在 告诉 Angular: 当 MyService 被 注入 时 ， 我 们 希望 提供 MyService 的 一 个 单 例 实例 。 

为 这 种 需求 非常 普遍 ， 所 以 这 个 类 实际 上 是 一 种 缩写 形式 ， 其 等 价 的 完整 配置 方式 是 : 


providers: [ 
{ provide: MyComponent, useClass: MyComponent } 


] 
除了 创建 类 的 实例 之 外 ， 还 有 很 多 其 他 的 方式 可 以 进行 注入， 接 下 来 就 来 逐个 查看 。 






































8.6 提供 者 


Angular 的 依赖 注入 体系 有 很 多 精巧 之 处 ， 其 中 之 一 是 我 们 有 很 多 种 方式 来 配置 注入 过 程 。 
比如 可 以 : 
口 注入 一 个 类 的 ( 单 例 ) 实例 ; 
口 调用 任意 函数 ， 并 注入 该 函数 的 返回 结果 ; 
口 注入 一 个 值 ; 
a 创建 一 个 别名 。 
下 面 分 别 用 例子 进行 解释 。 








8.6.1 使 用 类 
注入 类 的 单 例 实 例 大 概 是 最 常见 的 注入 类 型 了 。 
配置 方法 如 下 : 
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{ provide: MyComponent, useClass: MyComponent } 


需要 注意 的 是 : provide 配 置 方法 接收 两 个 键 ( key )。 第 一 个 provide 键 是 我 们 用 作 这 个 可 
注入 对 象 标识 的 令 牌 ， 第 二 个 useclass 键 用 来 指出 注入 什么 以 及 如 何 注 入 。 


在 这 里 ， 我 们 把 MyComponent 类 映射 到 了 MyComponent 令 牌 。 在 这 个 例子 中 ， 类 名 和 令 牌 名 
是 匹配 的 。 这 是 最 常见 的 情况 ， 但 是 必须 知道 : 令 牌 和 被 注入 物 并 不 一 定 同名 。 


如 前 所 见 , 该 例子 中 的 注入 器 将 会 在 幕后 创建 一 个 单 例 对 象 ， 并 在 每 次 注入 它 时 返回 同一 个 
实例 。 


当然 ， 首 次 注入 时 它 尚未 实例 化 ， 需 要 创建 一 个 Mycomponent 实 例 。 此 时 ， 依 赖 注入 系统 就 
会 调用 该 类 的 构造 函数 。 


如 果 服 务 的 构造 函数 需要 一 些 参数 ， 会 怎么 样 呢 ? 假设 我 们 有 这 样 一 个 服务 。 























code/dependency injection/misc/app/ts/app.ts 
class ParamService { 
constructor(private phrase: string) ( 
console.log('ParamService is being created with phrase', phrase); 


} 


getValue(): string { 
return this.phrase; 
j 
j 


注意 , 它 的 构造 函数 需要 传人 一 个 短语 作为 参数 。 如 果 我 们 使 用 标准 注 人 机制 ， 就 会 在 浏览 
何 中 看 到 一 个 错误 ， 如 图 8-4 所 示 。 








Cannot resolve all parameters for 'ParameterService'(?). Make sure that all the lang.js:375 
parameters are decorated with Inject or have valid type annotations and that 'ParameterService' is 
decorated with Injectable. 





图 8-4 ”注入 错误 

这 是 因为 我 们 没有 为 注入 器 提供 足够 的 信息 来 构造 这 个 类 。 要 解决 这 个 问题 ， 就 得 告诉 注入 
器 在 创建 该 服务 的 实例 时 要 使 用 哪个 参数 。 

如 果 想 在 创建 服务 时 传人 一 个 参数 ， 就 要 改 用 工厂 了 。 











8.6.2 ”使 用 工厂 
如 果 要 使 用 工厂 进行 注入 ， 就 需要 写 一 个 返回 任意 对 象 的 函数 。 
{ 


provide: MyComponent, 
useFactory: () => { 
if (loggedIn) { 
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return new MyLoggedComponent(); 
j 
return new MyComponent(); 
j 
j 


注意 , 在 这 个 例子 中 , 我 们 注入 时 用 的 令 牌 是 MyComponent, 但 是 它 会 检查 ( 作用 域外 面 的 ) 


© s 


loggedIn 变 量 。 如 果 1oggedIn 为 真 , 则 注入 器 会 返回 一 个 MyLoggedComponent 的 实例 ; 否则 返回 
MyComponent 的 实例 。 

工厂 还 可 以 拥有 自己 的 依赖 : 

{ 


provide: MyComponent, 
useFactory: (user) => { 
if (user.loggedIn()) ( 
return new MyLoggedComponent(user); 
j 
return new MyComponent(); 
) 
deps: [ User ] 
j 


因此 ， 如 果 要 使 用 前 面 的 ParamService RAMIE HuseFactory GREK. 




















code/dependency injection/misc/app/ts/app.ts 


GNgModule(Í 
declarations: [ DiSampleApp ], 
imports: [ BrowserModule ], 


bootstrap: [ DiSampleApp ], 
providers: [ 
SimpleService, 


{ 
provide: ParamService, 
useFactory: (): ParamService => new ParamService('YOLO ' ) 


} 
] 


}) 
class DiSampleAppAppModule {} 


platformBrowserDynamic().bootstrapModule(DiSampleAppAppModule) 
.catch((err: any) -» console.error(err)); 


我 们 可 以 把 SimpleService ÉL 42x f£ providers f] E P, ix X E] Æ Simple- 
Service 并 不 需要 任何 参数 。 它 会 被 翻译 成 : 


{ provide: SimpleService, useClass: SimpleService ] 








可 以 说 ， 工 厂 是 创建 可 注入 对 象 的 最 强 方式 ， 因 为 我 们 可 以 在 工 三 函数 中 “为 所 和 欲 为 ”。 
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8.6.3 使 用 值 
当 我 们 需要 一 个 常量 ,而 它 可 能 会 根据 应 用 的 其 他 部 分 甚至 环境 进行 重 定义 时 C 比如 测试 环 
境 或 生产 环境 )， 这 种 方式 非常 有 用 。 
{ provide: 'API URL', useValue: 'http://my.api.com/v1' } 


在 8.9 节 中 ， 我 们 会 提供 一 个 更 完善 的 例子 。 











8.64 使 用 别名 
我 们 还 可 以 制造 一 个 别名 来 引用 以 前 注册 过 的 令 牌 ， 比 如 : 


{ provide: NewComponent, useClass: MyComponent } 





8.7. 应 用 中 的 依赖 注入 
当 我 们 开发 应 用 时 ， 需 要 经 过 三 步 才 能 进行 依赖 注入 : 
(1) 创建 该 服务 的 类 ; 
(2) 在 准备 接受 注入 的 部 件 上 声明 该 依赖 ; 
(3) 配置 要 注入 的 依赖 〈 比如 在 我 们 的 NgModule 中 通过 Angular 注 册 要 注入 的 依赖 )。 


我 们 要 做 的 第 一 件 事 是 创建 该 服务 的 类 , 该 类 会 暴露 出 我 们 想 要 用 到 的 那些 行为 。 它 也 被 称 
为 可 注入 对 象 ， 因 为 它 就 是 我 们 的 部 件 将 通过 依赖 注入 接收 到 的 东西 。 


下 面 示范 如 何 创建 服务 。 


code/dependency injection/simple/app/ts/services/ApiService.ts 











export class ApiService { 
get(): void ( 
console.log('Getting resource...'); 


j 
} 


现在 已 经 有 了 要 注入 的 东西 ， 接 下 来 要 声明 当 Angular 创 建部 件 时 ， 我 们 和 希望 接收 哪些 依赖 。 
我 们 以 前 直接 使 用 Injector 类 , 但 在 写 部 件 时 , 我 们 通常 会 使 用 Angular 提 供 的 两 种 快捷 方式 。 
第 一 种 是 在 部 件 的 构造 函数 中 声明 这 些 可 注 和 对象。 这 也 是 最 典型 的 用 法 。 

要 做 到 这 一 点 ， 必 须 先导 入 该 服务 。 

















code/dependency injection/simple/app/ts/app.ts 
/* 


* Services 
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*/ 


import { ApiService } from 'services/ApiService'; 
然后 在 构造 函数 中 声明 它 。 


code/dependency injection/simple/app/ts/app.ts 





class DiSampleApp { 
constructor(private apiService: ApiService) { 


} 

当 我 们 在 组 件 的 构造 函数 中 声明 依赖 时 ，Angular 会 通过 反射 机 制 来 找 出 要 注入 的 类 。 也 就 
是 说 ，Angular 会 发 现 我 们 正在 构造 函数 中 查找 一 个 ApiService 类 型 的 对 象 ， 并 检查 依赖 注入 系 
统 以 找 出 合适 的 可 注入 对 象 。 


有 时 我 们 需要 给 Angular 更 多 的 提示 ， 来 告诉 它 我 们 到 底 要 注入 什么 。 在 这 种 情况 下 ， 我 们 
要 使 用 第 二 种 方式 ， 即 @Inject 注 解 。 


class DiSampleApp { 
private apiService: ApiService; 
constructor(@Inject(ApiService) apiService) { 
this.apiService = apiService; 


} 
































如 果 我 们 要 用 这 种 等 价 形式 ， 可 以 打开 app.long.ts 文 件 ， 把 它 的 内 容 复制 到 
app.ts 中 。 
使 用 依赖 注入 的 最 后 一 步 是 把 部 件 想 要 的 东西 与 可 注入 对 象 关联 起 来 。 换 句 话说 , 我们 告诉 
Angular: 当 部 件 声明 了 它 的 依赖 时 ， 应 该 注入 什么 
{ provide: ApiService, useClass: ApiService } 
在 这 个 例子 中 ， 我 们 使 用 令 牌 Apiservice 暴 露出 了 ApiService 类 的 单 例 对 象 。 
最 后 ， 我 们 把 这 个 ApiService 添 加 到 NgModule 的 providers 属 性 中 。 














code/dependency injection/simple/app/ts/app.ts 


@NgModule({ 
declarations: [ DiSampleApp ], 
imports: [ BrowserModule ], 


bootstrap: [ DiSampleApp ], 
providers: [ ApiService ] // «-- here 


}) 
class DiSampleAppAppModule {} 


platformBrowserDynamic().bootstrapModule(DiSampleAppAppModule) 
.catch((err: any) => console.error(err)); 
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8.8 ”使 用 注入 器 
我 们 已 经 和 注入 器 打 过 交道 了 ， 现 在 要 更 进一步 ， 看 看 什么 时 候 需 要 显 式 地 使 用 它们 。 
情况 之 一 是 ， 当 我 们 需要 控制 在 什么 时 机 创建 依赖 的 单 例 对 象 时 。 


为 了 说 明 什么 时 候 会 出 现 这 种 情况 ， 我 们 来 构建 另 一 个 应 用 。 除 了 使 用 我 们 以 前 创建 过 的 
ApiService 外 ， 它 还 会 用 到 一 个 新 的 服务 。 


该 服务 将 用 来 根据 浏览 器 的 窗口 大 小 实例 化 另外 两 个 服务 。 如 果 窗 口 宽度 小 于 800 像 素 ， 它 
就 返回 一 个 名 叫 SmallService 的 服务 实例 ; 否则 返回 LargeService 的 实例 。 


下 面 是 SmallService 的 代码 。 


code/dependency injection/complex/app/ts/services/SmallService.ts 





















































export class SmallService { 
run(): void { 
console.log('Small service...'); 
j 
j 


下 面 是 LargeService 的 代码 。 


code/dependency_injection/complex/app/ts/services/LargeService.ts 




















export class LargeService { 
run(): void { 
console.log('Large service...'); 
} 
} 


然后 ， 我 们 开始 写 ViewPortService， 它 负责 在 两 者 之 间作 出 选择 。 


code/dependency injection/complex/app/ts/services/ViewPortService.ts 





import {LargeService} from './LargeService'; 
import {SmallService} from './SmallService'; 


export class ViewPortService { 
determineService(): any ( 
let w: number - Math.max(document.documentElement.clientWidth, 
window.innerWidth || 0); 


if (w « 800) ( 
return new SmallService(); 


} 


return new LargeService(); 
j 
j 


现在 ， 我 们 创建 一 个 使 用 这 些 服务 的 应 用 。 
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code/dependency injection/complex/app/ts/app.ts 


class DiSampleApp { 
constructor(private apiService: ApiService, 
GInject('ApiServiceAlias') private aliasService: ApiService, 
GInject('SizeService') private sizeService: any) ( 


} 

这 里 我 们 仍然 用 以 前 的 方式 获得 一 个 ApiService 的 实例 。 不 过 这 次 我 们 通过 别名 'Api- 
ServiceAlias ' 获 得 了 同一 个 实例 。 最 后 ， 我 们 要 获得 一 个 'SizeService ' 的 实例 ， 但 它 还 没有 
定义 过 。 

为 了 理解 每 个 服务 都 代表 什么 ， 我 们 来 看 看 NgModule。 


code/dependency injection/complex/app/ts/app.ts 





GNgModule(Í 

declarations: [ DiSampleApp ], 

imports: [ BrowserModule ], 

bootstrap: [ DiSampleApp ], 

providers: [ 
ApiService, 
ViewPortService, 
( provide: 'ApiServiceAlias', useExisting: ApiService ], 
{ 


provide: 'SizeService', 
useFactory: (viewport: any) => ( 
return viewport.determineService(); 


i 


deps: [ViewPortService] 
j 
] 


}) 
class DiSampleAppAppModule {} 


这 段 代码 的 意思 是 , 我 们 首先 希望 该 应 用 的 注入 器 知道 ApiService 和 ViewPortService 这 两 
个 可 注入 对 象 。 

接 下 来 的 声明 表示 是 我 们 希望 通过 另 一 个 令 牌 (字符 串 ApiServiceAlias ) 来 使 用 既 有 服务 
ApiService。 

然后 ， 我 们 通过 另 一 个 字符 串 令 牌 SizeService 定 义 了 另 一 个 可 注 和 对象。 该 工厂 通过 把 
ViewPortService 列 在 自己 的 qdeps 数 组 中 ,表明 自己 需要 接收 该 服务 的 一 个 实例 。 然 后 ， 它 将 调 
用 该 实 例 的 determineService() 方法 ， 并 根据 浏览 器 的 宽度 返回 一 个 SmallService 或 
LargeService 的 实例 。 

当 点 击 模板 中 的 一 个 按钮 时 ， 我 们 会 发 起 三 次 调用 : 一 次 是 对 ApiService ， 一 次 是 对 别名 
ApiServiceAlias ， 最 后 一 次 则 是 对 SizeService。 
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code/dependency injection/complex/app/ts/app.ts 


invokeApi(): void { 
this.apiService.get(); 
this.aliasService.get(); 


this.sizeService.run(); 


) 
现在 , 如 果 我 们 运行 此 应 用 并 在 小 型 浏览 器 窗口 中 点 击 Invoke API 按 钮 , 结果 会 如 图 8-5 所 示 。 











eoe a ng-book 2: Angular 2 Dep- X | Felipe | 
= © CQ |[ localhost:8080 家 | 三 
Dependency Injection 
| Invoke API || Use Injectors | 
Elements Console Sources Network » os 








v U Preserve log 


RO 
© Ww <topframe> 
ApiService.ts:3 
ApiService.ts:3 


Getting resource... 
Getting resource... 
Small service... SmallService.ts:3 


> 








图 8-5 ”小 型 浏览 絮 窗 口 
条 来 自 ApiService ， 另 一 条 来 自 别 名 服务 ， 最 后 一 条 来 自 Smal1- 





我 们 会 获得 三 条 日 志 : 一 条 


Services; 
如 果 我 们 让 浏览 器 窗口 更 大 一 点 ， 刷 新 页 面 并 再 次 点 击 按钮 ， 结 果 会 如 图 8-6 所 示 。 
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@ ^ O /是 no-book 2: Angular 2 Dep: x | Felipe 
Œ [5 localhost:8080 三 
| Invoke API | Use Injectors 
RO Elements Console Sources Network Timeline Profiles Resources Security Audits x 
© Ww <top frame> v Preserve log 

Getting resource... ApiService.ts:3 
Getting resource... ApiService.ts:3 
LargeService.ts:3 


Large service... 


> 








图 8-6 ”大 型 浏览 器 窗口 


这 样 我 们 就 会 收 到 来 自 LargeService 的 日 志 。 然 而 ， 如 果 把 浏览 器 窗口 调 小 一 点 ， 不 刷新 


页 面 并 再 次 点 击 按钮 ， 收 到 的 仍 将 是 来 自 LargeService 的 日 志 ， 如 图 8-7 所 示 。 
这 是 因为 这 个 工厂 函数 只 会 被 执行 一 次 ， 也 就 是 在 应 用 启动 时 。 


要 解决 这 个 问题 ， 我 们 可 以 创建 自己 的 注入 器 ， 并 通过 如 下 方式 获得 正确 的 服务 实例 。 
































code/dependency injection/complex/app/ts/app.ts 


useInjectors(): void { 
let injector: any = ReflectiveInjector.resolveAndCreate( [ 
ViewPortService, 


{ 


provide: 'OtherSizeService', 
useFactory: (viewport: any) => { 
return viewport.determineService(); 
Fr 
deps: [ViewPortService] 
j 
1); 


let sizeService: any = injector.get( 'OtherSizeService'); 
sizeService.run(); 


} 
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eoo gp ng-book 2: Angular 2 Dep: X |, | Felipe | 


> QC | [ localhost:8080 pj = 











Dependency Injection 


| Invoke API | Use Injectors | 











ROID Elements Console Sources Network » PERE 

G Ww <top frame> v Preserve log 
Getting resource... ApiService.ts:3 
Getting resource... ApiService.ts:3 
Large service... LargeService.ts:3 
Getting resource... ApiService.ts:3 
Getting resource... ApiService.ts:3 
Large service... LargeService.ts:3 











图 8-7 “小 型 浏览 器 窗口 : 调整 大 小 后 

这 里 我 们 创建 了 一 个 注入 器 , 它 知道 ViewPortService 和 另 一 个 以 字符 串 otherSizeService 
为 令 牌 的 可 注 和 对象。 这 个 可 注入 对 象 与 我 们 以 前 用 过 的 SizeService 使 用 同一 个 工厂 。 

最 后 ， 它 使 用 我 们 创建 的 注入 器 来 获得 一 个 otherSizeService 的 实例 。 

这 时 ， 如 果 我 们 在 一 个 大 型 浏览 器 窗口 中 运行 该 应 用 并 点 击 Use Injector 按 钮 ， 就 会 收 到 一 条 
来 自 LargeService 的 日 志 。 然 而 ， 如 果 我 们 把 窗口 调 小 ， 即 使 不 刷新 页 面 ， 也 能 正常 收 到 来 自 
SmallService 的 日 志 。 这 是 因为 现在 注入 器 是 随 需 创建 的 ， 我 们 每 次 点 击 按钮 时 都 会 重新 执行 
工厂 函数 。 这 真 漂亮 ! 




















8.9 替换 值 

使 用 依赖 注入 的 另 一 个 理由 是 在 运行 期 间 改 变 被 注入 对 象 的 硬 编码 值 。 当 我 们 用 一 个 API 服 
务 来 向 应 用 的 后 端 API 发 起 HTTP 请 求 时 ， 就 会 出 现 这 种 情况 。 在 单元 测试 或 集成 测试 的 场景 下 ， 
我 们 肯定 不 希望 代码 接触 生产 环境 的 数据 库 。 这 时 ， 就 可 以 写 一 个 Mock 的 API 服 务 ， 它 可 以 天 衣 
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无 颖 地 替换 掉 我 们 的 具体 实现 。 我 们 这 就 来 详细 解释 一 下 。 
比如 ， 如 果 在 开发 环境 下 运行 该 应 用 ， 我 们 可 能 会 接触 与 生产 环境 下 不 同 的 API 服 务 顺 。 


当 我 们 发 布 一 个 开源 或 可 复 用 的 服务 时 ， 这 就 更 加 有 用 了 。 这 种 情况 下 ,我们 要 人 允许 调用 者 
定义 或 改写 API 的 URL。 


























我 们 来 写 一 个 简单 的 示例 应 用 ， 它 会 根据 自己 是 在 生产 模式 还 是 开发 模式 运行 来 为 API 的 
URL 注 入 不 同 的 值 。 先 从 ApiService 类 开始 。 


code/dependency injection/value/app/ts/services/ApiService.ts 


import { Inject } from 'Gangular/core'; 
export const API URL: string - 'API URL'; 


export class ApiService { 


constructor(GInject(API URL) private apiUrl: string) { 
j 


get(): void { 
console.log(^Calling $[this.apiUrl]/endpoint...^); 


J 
} 


我 们 先 声 明了 一 个 常量 , 它 会 被 用 作 APIURL 依 赖 的 令 牌 。 换 句 话说 ,， Angular 会 根据 字符 串 


'API_URL' 来 存储 要 调用 哪个 URL 的 信息 。 这 样 ， 当 我 们 使 用 @Inject(API_URL) 时 ,就 会 把 正确 
的 值 注 入 到 apiur1 变 量 














注意 ， 我 们 还 同时 导出 了 API_URL 常 量 ， 这 样 客 户 方 应 用 就 可 以 从 服务 之 外 使 用 API_URL 来 
注入 正确 的 值 。 


现在 , 我 们 已 经 有 了 服务 , 接 下 来 写 一 个 应 用 组 件 , 它 将 使 用 该 服务 ,并 根据 所 在 的 运行 环 
境 为 URL 提 供 不 同 的 值 。 





code/dependency injection/value/app/ts/app.ts 


GComponent( f 
selector: 'di-value-app', 
template: ^ 


«button (click)z"invokeApi()"»Invoke API«/button» 


}) 
class DiValueApp { 


constructor (private apiService: ApiService) { 


} 


invokeApi(): void { 
this.apiService.get(); 
j 
j 
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这 是 组 件 的 源 代码 。 在 构造 函数 中 ， 我 们 声明 了 一 一 个 ApiService 类 型 的 变量 apiService。 
0 d M d 断 出 我 们 需要 一 个 Apiservice 型 的 依赖 ， 并 在 运行 时 注入 它 。 如 果 我 们 要 


它 更 明确 一 点 ， 那 么 可 以 这 样 写 : 


constructor(GInject(ApiService) private apiService: ApiService) { 


] 

该 组 件 有 一 个 Invoke API 按 钮 。 当 点 击 此 按钮 时 ， 我 们 调用 ApiService 的 get() 方 法 。 此 方 
法 就 会 把 我 们 正在 使 用 的 API_URL 的 值 记 录 到 控制 台中 。 

下 一 步 是 使 用 提供 者 来 配置 本 应 用 


code/dependency injection/value/app/ts/app.ts 


const isProduction: boolean - false; 











GNgModule(Í 
declarations: [ DiValueApp ], 
imports: [ BrowserModule ], 
bootstrap: [ DiValueApp ], 
providers: [ 
{ provide: ApiService, useClass: ApiService ], 
( 
provide: API URL, 
useValue: isProduction ? 
'https://production-api.sample.com' 
'http://dev-api.sample.com' 





} 
] 


}) 
class DiValueAppAppModule {} 


platformBrowserDynamic().bootstrapModule(DiValueAppAppModule) 

我 们 首先 声明 了 一 个 名 叫 isProduction 的 常量 ， 并 把 它 设置 为 false。 我们 先 假装 做 了 点 什 
么 来 检测 自己 是 否 是 在 生产 模式 下 运行 。 这 里 可 以 先 反 它 硬 编码 进去 , 也 可 以 使 用 一 些小 技巧 来 
实现 它 ， 比 如 使 用 webpack 和 一 个 .env 文 件 。 

最 后 ， 我 们 引导 本 应 用 ， 并 设置 两 个 提供 者 : 一 个 用 真正 的 实现 类 来 提供 ApiService， 男 
一 个 则 用 来 提供 API_URL 。 如 果 在 生产 模式 下 运行 ,我 们 就 使 用 某 个 值 ， 否 则 用 另 一 个 。 

要 测试 它 ， 我 们 可 以 带 上 isProduction = true 来 运行 本 应 用 。 然 后 点 击 该 按钮 ， 就 会 看 到 
日 志 中 记录 了 生产 模式 下 的 URL， 如 图 8-8 所 示 。 
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WB ng-book 2: Angular 2 Dep: x | Fete | 

€ > CŒ |D localhost:8080 X 
Dependency Injection 

x 





[x à] Elements Console Sources Network Timeline Profiles Resources Security » 


© FY top v O Preserve log 
ApiService.ts:10 


Calling https://production-api.sample.com/endpoint... 


> 


图 8-8 生产 环境 
如 果 把 它 改 成 isProduction = false， 就 会 看 到 开发 模式 下 的 URL， 如 图 8-9 所 示 。 





i 


Felipe 














Q C (ng-book2:Angular2Depe x 是 
€ > Œ D localhost:8080 X= 
Dependency Injection 
Invoke API | 
Profiles Resources Security » OREK 


Ir à] Elements Console Sources Network Timeline 


© Ww top v O Preserve log 


Calling http: //dev-api.sample.com/endpoint... ApiService.ts:10 


> | 








图 8-9 开发 环境 
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8.10 NgModule 
NgModule 是 帮助 编译 器 和 依赖 注入 对 依赖 进行 组 织 的 方式 。 让 我 们 看 看 为 什么 需要 
NgModule 以 及 它们 是 如 何 工 作 的 。 


我 们 要 训 析 的 是 Angular 中 的 编译 器 和 依赖 注入 这 两 个 角色 。 简 而 言 之 ，Angulat 需 要 解决 组 
件 定义 了 哪些 HTML 标 记 (tag) 以 及 这 些 依赖 来 自 哪里 这 两 个 问题 。 





















































8.10.1 NgModule 与 JavaScript 模块 


你 可 能 会 疑惑 : 为 什么 我 们 需要 一 个 新 的 模块 系统 呢 ? 只 用 ES6/TypeScript 的 模块 还 不 够 
nj? 














这 是 因为 虽然 仍然 要 用 import 来 把 代码 模块 加 载 到 JavaScript 环 境 中 ， 但 NgModule 体 系 却 是 
Angular 框 架 内 部 对 依赖 进行 组 织 的 一 种 方式 。 特 别 是 围绕 两 个 问题 .编译 出 了 哪些 标记 以 及 哪 
些 依赖 应 该 被 注入 其 中 。 








8.10.2 ”编译 器 与 组 件 


对 于 编译 锅 来 说 ， 如 果 有 一 个 带 有 自 定 义 标记 的 Angular 横 板 ， 你 就 得 告诉 
是 有 效 的 〈 以 及 应 该 为 它们 附加 上 哪些 功能 )。 


比如 ， 假 设 你 有 这 样 一 个 组 件 : 


GComponent ( f 
selector: 'hello-world', 
template: ^«div»Hello world«/div»^ 


I» 
class HelloWorld { 


} 


我 们 希望 编译 带 知 道 下 列 HTML 代 码 应 该 使 用 这 个 hello-wor1d 组 件 ( 这 个 hello-wor1d 可 
不 是 随便 写 的 无 效 标签 ): 


«div» 
«hello-world»«/hello-world» 
«/div» 


在 AngularJS 中 ，hello-wor1d 选 择 咒 应 该 已 经 在 全 局 范围 注册 过 了 。 在 你 的 应 用 成 长 到 发 
生命 名 冲突 之 前 ， 这 样 做 都 很 方便 。 比 如 ， 如 果 两 个 开源 项 目 使 用 了 相同 的 选择 器 ， 问 题 就 很 
难 解决 。 

如 有 果 你 用 过 Angular RC.5 之 前 的 老 版 本 ,可 能 还 记得 那些 版 本 需要 你 在 @Component 注 解 中 指 
定 一 个 directives 选 项 。 这 种 方式 的 优点 是 它 不 怎么 需要 “魔术 ”来 移 除 表 面 的 冲突 。 它 的 问 





E 


译 需 哪些 标记 
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题 在 于 要 为 每 个 组 件 指定 用 到 的 所 有 指令 ， 这 样 太 繁 珊 了 。 
改 用 NgModule ， 我 们 可 以 在 “模块 ”一 级 告诉 Angular 组 件 的 依赖 关系 。 我 们 会 在 稍 后 讲解 
更 多 内 容 。 




















8.10.3 ”依赖 注入 与 提供 者 
回忆 一 下 , 依赖 注入 是 一 种 让 依赖 在 整个 应 用 中 可 用 的 组 织 形式 。 它 对 简单 的 import 代 码 形 
式 进行 了 强化 ,让 我 们 得 以 用 一 种 标准 化 的 方式 来 共享 单 例 、 创 建 工 厂 以 及 在 测试 期 间 改写 依赖 。 


在 Angular RC.5 之 前 的 版 本 中 , 我 们 不 得 不 在 bootstrap 函 数 的 providers 参 数 中 指定 待 注 和 
的 一 切 (提供 者 )。 
































回想 下 列 术语 : 提供 者 提供 ( 创建、 实例 化 等 ) 你 想 要 的 可 注入 对 象 。 在 Angular 
中 ， 当 你 想 要 访问 可 注入 对 象 时 ， 就 把 一 个 依赖 注入 一 个 函数 中 。Angular 中 的 
依赖 注入 框架 就 会 找到 它 ， 并 把 它 提 供给 你 。 





现在 ， 利 用 NgModule ， 每 个 提供 考 都 被 指定 为 模块 的 一 部 分 。 
现在 你 应 该 明白 了 为 什么 需要 NgModule 以 及 要 怎样 使 用 它 了 吧 ? 这 里 是 最 简单 的 例子 : 


// app.ts 

GNgModule(Í( 
imports: [ BrowserModule ], 
declarations: [ HelloWorld ], 


bootstrap: [ HelloWorld ] 


}) 
class HelloWorldAppModule {} 


platformBrowserDynamic().bootstrapModule(HelloWorldAppModule); 

在 这 里 ， 我 们 定义 了 一 个 HelloWor1dAppModule 类 ， 随 后 将 其 作为 我 们 应 用 程序 的 入 口 点 。 
从 RC5 开 始 ， 不 再 使 用 组 件 来 引导 应 用 ， 而 是 改 用 bootstrapModule ， 就 像 这 里 的 代码 一 样 。 

NgModule 可 以 导入 其 他 模块 作为 自己 的 依赖 。 我 们 要 在 浏览 器 中 运行 此 应 用 , 所 以 还 要 导入 
BrowserModule。 

我 们 要 在 此 应 用 中 使 用 Hel lowor1d 组 件 。 记 住 这 里 的 关键 : 每 个 组 件 都 必须 在 某 些 NgModule 
中 声明 过 。 这 里 我 们 把 Hel lowor1d 放 在 了 NgModule 的 declarations 中 。 

我 们 说 HelloWor1d 组 件 从 属于 HelloWor1dAppModule ; 任何 组 件 都 只 能 从 属于 一 个 
NgModujle。 


我 们 通常 会 把 很 多 组 件 一 起 放 进 一 个 NgModule 中 ， 这 很 像 Java 中 的 package 或 C# 中 的 


namespace。 
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如 果 你 想 引 导 该 模块 (也 就 是 把 该 模块 作为 应 用 的 人 口 点 )， 那 么 就 得 提供 一 个 bootstrap 
属性 ， 用 它 来 指定 一 个 作为 该 模块 人 口 点 的 组 件 。 

在 这 个 例子 中 ， 你 将 会 bootstrap 这 个 Hellowor1d 组 件 ， 并 把 它 作为 根 组 件 。 不 过 ， 如 果 你 
创建 的 模块 不 需要 用 作 应 用 程序 入 口 点 ， 那 么 bootstrap 属 性 就 是 可 选 的 。 














8.10.4 组 件 可 见 性 


要 使 用 任何 组 件 ， 当 前 的 NgModule 都 必须 先知 道 它 。 假 设 我 们 想 在 hello-wor1d 组 件 中 使 用 
user-greeting 组 件 ， 就 像 这 样 : 








<!-- hello-world template --» 

«div» 
«user-greeting»«/user-greeting» 
world 

«/div» 











如 果 任 何 组 件 想 要 使 用 其 他 组 件 , 它 必须 首先 通过 NgModule 体 系 获得 访问 权 。 有 两 种 方式 能 
做 到 这 一 点 : 


(1) user-greeting 组 件 位 于 同一 个 NgModule 中 ( 比如 HelloWor1ldAppModule ); 








(2) HelloWor1dAppModule 导 入 (imports ) 了 UserGreeting 组 件 所 在 的 模块 。 








假设 我 们 要 访问 第 二 个 路 由 。 下 面 是 UserGreetingModule 中 的 UserGreeting 组 件 的 实现 
代码 : 


@Component({ 
selector: 'user-greeting', 
template: ^«span»hello«/span»^ 
}) 
class UserGreeting { 


} 











GNgModule(Í 
declarations: [ UserGreeting ], 
exports: [ UserGreeting ] 


D) 


export class UserGreetingModule {} 

注意 ， 这 里 我 们 添加 了 一 个 新 的 属性 exports。 可 以 先 把 exports 当 作 这 个 NgModule 中 公开 
组 件 的 列表 。 这 里 隐 含 的 意思 是 ， 我 们 可 以 轻松 地 制作 一 个 私有 组 件 ， 只 要 别 把 它 列 进 exports 
中 就 行 了 。 

如 果 你 忘 了 把 组 件 加 到 qeclarations 和 exports 中 (然后 还 要 在 另 一 个 模块 中 通过 imports 
引入 本 模块 )， 那 么 组 件 将 不 会 生效 。 为 了 让 你 的 组 件 能 在 其 他 模块 中 通过 imports 的 方式 使 用 ， 
你 必须 把 组 件 同时 放 在 这 两 个 地 方 。 
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现在 , 只 要 把 它 导 入 到 Hellowor1dAppModule 中 ,我 们 就 可 以 在 Hel lowor1d 组 件 中 使 用 
就 像 这 样 : 


// updated HelloWorldAppModule 





@NgModule({ 
declarations: [ HelloWorld ], 
imports: [ BrowserModule, UserGreetingModule ], // «-- added 


bootstrap: [ HelloWorld ], 


}) 
class HelloWorldAppModule {} 


8.10.5 指定 提供 者 
只 要 把 可 注入 对 象 的 提供 者 添加 到 NgModule 的 providers 属 性 中 ， 就 算 完 成 指定 了 。 
例如 ， 假 设 我 们 有 这 样 一 个 简单 的 服务 : 


export class ApiService { 
get(): void { 
console.log('Getting resource...'); 
j 
j 


我 们 希望 把 它 注入 到 组 件 中 ， 就 像 这 样 : 


class ApiDataComponent { 
constructor(private apiService: ApiService) ( 


} 








getData(): void { 
this.apiService.get(); 
} 
} 





PETS 


用 NgModule 可 以 很 容易 做 到 这 一 点 : 只 要 把 ApiService 传 给 该 模块 的 providers 属 性 就 可 以 了 : 





@NgModule({ 
declarations: [ ApiDataComponent ], 
providers: [ ApiService ] // «— here 


}) 
class ApiAppModule {} 


这 里 直接 传人 ApiService 实 际 上 是 一 个 缩写 版 本 ， 使 用 provide 的 完整 版 本 是 这 样 的 ; 


GNgModule(Í 
declarations: [ ApiDataComponent ], 
providers: [ 
provide(ApiService, { useClass: ApiService ]) 
] 


}) 
class ApiAppModule {} 
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我 们 是 在 告诉 Angular， 当 ApiService 被 注 和 时， 依赖 注入 体系 要 负责 创建 、 维 护 该 类 的 单 
例 ， 并 把 它 传 进去 。 


要 从 其 他 模块 中 使 用 这 些 提 供 者 ， 必 须 先导 入 ( import ) 那个 模块 。 


由 于 ApiDataComponent 和 ApiService 都 位 于 同一 个 NgModule 中 , ApiDataComponent 可 以 直 
接 注 入 ApiService。 和 否则 ， 就 需要 把 包含 ApiService 的 模块 导入 到 ApiAppModule 中 。 

















8.11 总 结 
可 以 看 出 , 依赖 注入 和 NgModule 的 协作 为 管理 应 用 中 的 依赖 提供 了 一 种 强大 的 方式 。 要 了 解 
更 多 知识 ， 请 参考 下 列 资源 : 


口 Angular DI 官 方 文 档 " 
O Victor Savkin 对 AngularJS 中 和 Angular 中 依赖 注入 的 对 比 ? 














(D https://angular.io/docs/ts/latest/guide/dependency-injection.html 
@ http://victorsavkin.com/post/126514197956/dependency-injection-in-angular-1-and-angular-2 
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数据 架构 概览 


管理 数据 可 以 说 是 编写 可 维护 应 用 最 环 手 的 方面 之 一 。 有 很 多 种 方法 可 以 将 数据 应 用 到 你 的 
应 用 之 中 : 
口 AJAX HTTP 请 求 
口 Websocket 
口 Indexdb 
口 LocalStorage 





口 LocalStorage 

口 Service Worker 

a 等 等 

数据 架构 涉及 的 问题 如 下 。 

口 如 何 将 所 有 不 同 的 数据 源 聚 合成 一 个 完整 的 体系 ? 

口 如 何 防止 意 想不到 的 副作用 导致 bug? 

口 如 何 更 好 地 构建 代码 以 使 其 更 容易 维护 并 让 新 来 的 团队 成 员 更 容易 上 手 ? 
a 当 数 据 发 生变 化 时 ， 如 何 让 应 用 尽快 作出 反应 ? 


多 年 以 来 ，MVC 一 直 是 构建 数据 应 用 的 标准 模式 : 模型 包含 业务 逻辑 ， 视 图 负责 显示 数据 ， 
控制 器 将 所 有 一 切 联系 在 一 起 。 不 过 问题 是 ， 我 们 知道 MVC 模 式 并 不 能 很 好 地 直接 转化 到 客户 
端的 网 络 应 用 中 。 

目前 ， 数 据 架 构 领域 出 现 了 复兴 并 有 许多 新 理念 涌现 出 来 。 

口 MVW/ 双 向 数据 绑 定 : Model-View-Whatever" 是 用 来 形容 AngularJS 中 上 默认 架构 的 一 个 术 

语 。$scope 提 供 数 据 双向 绑 定 ， 整 个 应 用 都 共用 同样 的 数据 结构 ， 某 个 区 域 的 一 个 变化 







































































(D https://plus.google.com/--AngularJS/posts/aZNVhj355G2 
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会 传达 至 该 应 用 的 其 余部 分 。 

Q Flux”: 它 使 用 单 向 数据 流 。 在 Flux 中 ，Store 负 责 存储 数据 ，View 负 责 泻 染 Store 中 的 数据 ， 
Action 负 责 改变 Store 中 的 数据 。 虽 然 设置 Flux 有 一 点 繁琐 , 但 是 因 为 数据 只 在 一 个 方向 上 
流动 ， 所 以 很 容易 推断 。 

O 可 观察 对 象 : observable 给 我 们 提供 了 数据 流 。 我 们 订阅 数据 流 然后 执行 操作 对 变化 作出 
反应 。RxJS? 是 当下 最 流行 的 响应 式 JavaScript 库 ， 给 我 们 提供 了 强 有 力 的 操作 符 , 用 来 在 
数据 流 上 组 合 一 系列 操作 。 





























e 还 有 很 多 关于 这 些 理念 的 变种 ， 例 如 ; 
Flux 作 为 一 种 模式 而 并 非 具 体 实 现 ， 它 有 许多 不 同 的 实现 方案 ( 就 像 MVC 有 许 
多 的 实现 方案 一 样 ); 
e Immutability 是 以 上 所 有 数据 架构 的 一 个 常见 变 
e Falcor 是 一 个 强大 的 框架 ， 可 以 帮 你 将 客户 端 模 型 和 服务 端 数 据 进行 绑 定 。 
e Falcor 通 常 使 用 可 观察 对 象 类 型 的 数据 架构 。 


Angular 数据 架构 
Angular 在 数据 架构 的 选择 上 极其 灵活 。 一 种 数据 策略 在 一 个 项 目 中 可 行 并 不 代表 在 另 一 个 
项 目 中 也 可 行 ， 所 以 Angular 并 未 规定 具体 的 技术 栈 ， 而 是 力图 让 你 无 论 选择 何 种 数据 架构 都 能 ON 
很 容易 使 用 (同时 保持 高 性 能 )。 
这 样 的 好 处 是 ， 你 可 以 拥有 足够 的 灵活 性 来 让 Angular 适 应 几乎 任何 情况 。 只 是 有 一 点 不 太 
好 : 你 将 不 得 不 自己 选择 适合 项 目的 数据 架构 。 
别 担心 ,我 们 不 会 让 你 自己 去 作出 这 个 艰难 的 决定 ! 在 接 下 来 的 几 章 里 ,我 们 将 教 你 如 何 使 
用 这 里 提 到 的 某 些 模式 来 构建 应 用 。 






































(D https://facebook.github.io/flux/ 
@ https://github.com/Reactive-Extensions/RxJS 
®© http://netflix.github.io/falcor/ 
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使 用 可 观察 对 象 的 数据 染 
构 ， 第 1 部 分 : 服务 








10.1 可 观察 对 象 和 RxJS 


在 Angular 中 ， 可 以 使 用 可 观察 对 象 作为 数据 架构 的 骨架 来 构建 应 用 。 使 用 可 观察 对 象 构造 
数据 被 称 为 响应 式 编程 ( reactive programming )。 

可 观察 对 象 和 响应 式 编程 究竟 是 什么 呢 ? 响应 式 编程 是 一 种 处 理 异 步 数 据 流 的 编程 方法 。 可 
观察 对 象 是 用 来 实现 啊 应 式 编 程 的 主要 数据 结构 。 必 须 承 认 ， 这 些 术 语 可 能 不 怎么 明确 。 因 此 ， 
我 们 会 在 本 章 通 过 具体 的 例子 来 帮助 你 更 好 地 理解 这 些 概念 。 




































































10.1.1 注意 : 一 些 必 备 的 RxJS 相关 知识 

需要 指出 的 是 ,本 书 的 重点 不 是 讲解 响应 式 编程 。 有 一 些 其 他 不 错 的 资源 可 以 教会 你 响应 式 
编程 的 基础 ， 你 应 该 阅读 它们 。 我 们 在 下 面 列 举 了 几 个 。 

你 可 以 将 本 章 视 为 如 何 使 用 RxJS 和 Angular 的 人 门 教程 ， 而 不 是 RxJS 和 响应 式 编程 的 详细 
指南 。 
























































会 详细 解释 我 们 接触 到 的 RxJS 概 念 和 API， 但 如 果 RxJS 对 你 来 说 还 是 个 新 鲜 事 物 ， 那 么 
要 通过 其 


需要 通过 其 他 相关 资源 来 补充 知识 。 





o 本 章 使 用 Underscore.js 
Underscore.js "是 一 个 流行 的 类 库 ， 为 Array 和 Object 这 样 的 JavaScript 数 据 结构 
提供 函数 式 操作 符 。 本 章 将 在 使 用 RxJS 的 同时 大 量 使 用 它 。 如 果 在 代码 中 看 见 
了 _， 比 如 _.map 或 者 _.sortBy ， 要 知道 这 就 是 在 使 用 Underscore.js 类 库 。 要 查 
阅 Underscore.js 文 档 ， 请 阅读 http://underscorejs.org/。 





(D http://underscorejs.org/ 
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10.1.2 学习 响 应 式 编程 和 RxJS 
如 果 你 只 想 学 习 RxJS， 推 荐 阅读 这 篇 文章 。 
O Andre Staltz 的 “你 不 容错 过 的 响应 式 编程 人 门 ”( https://gist.github.com/staltz/868e7 
e9bc2a7b8c1f754 ) 
在 你 了 解 一 些 RxJS 背 后 的 概念 之 后 ， 下 面 的 链接 可 以 帮 你 在 前 进 的 道路 上 走 得 更 远 。 


口 “哪些 静态 操作 符 可 以 用 来 创建 流 ? ”( https://github.com/Reactive-Extensions/RxJS/blob/ 
master/doc/gettingstarted/which-static.md ) 

口 “哪些 实例 操作 符 可 以 在 流 上 使 用 ? ”( https://github.com/Reactive-Extensions/RxJS/blob/ 
master/doc/gettingstarted/which-instance.md ) 

O RxMarbles: 各 种 流 操作 的 交互 式 图 解 ( http://staltz.com/rxmarbles ) 


本 章 由 始 至 终 都 会 提供 RxJS 的 API 文 档 链接 。RxJS 文 档 有 大 量 很 棒 的 示例 代码 ， 阐 明了 不 同 
的 流 和 操作 符 是 如 何 工 作 的 。 


















































Angular 必 须要 用 RxJS 吗 ? 
不 ， 完 全 不 必 。 可 观察 对 象 只 是 Angular 众 多 数据 模式 中 的 一 种 。 想 了 解 其 他 数 
据 模 式 ， 请 参见 第 9 章 。 





我 想 给 你 提 个 醒 : 起 初学 习 RxJS 时 会 有 一 些 烧 脑 。 但 是 相信 我 , 你 终 将 掌握 它 的 要 领 , 并 且 
这 些 付 出 都 是 值得 的 。 下 面 是 一 些 关 于 流 的 重要 概念 ， 会 对 你 有 所 帮助 。 


(1) 承诺 (promise ) 发 出 单个 值 ， 而 流 发 出 多 个 值 。 在 应 用 中 , 流 扮演 着 和 承诺 一 样 的 角色 。 
如 有 果 你 是 从 回调 函数 转 为 承诺 的 话 , 会 发 现 相 对 于 回调 函数 ,承诺 在 可 读 性 和 数据 可 维护 性 方面 
都 有 了 很 大 的 改进 。 同 样 ， 流 也 改进 了 承诺 ， 可 以 在 流 上 持续 响应 数据 的 变化 〈 与 此 相反 ， 承 诺 
是 一 次 性 解决 )。 


(2) 命令 式 代码 “ 拉 取 ”数据 ， 而 响应 式 流 “ 推 送 ” 数 据 。 在 响应 式 编程 中 ， 代 码 订 阅 了 数 
据 变 化 时 接收 通知 ， 流 会 把 数据 “推送 ”给 这 些 订阅 者 。 

(3) RxJS 是 函数 式 的 。 如 果 你 热衷 于 像 nap 、reduce 和 filter 这 样 的 函数 式 操 作 符 ， 那 么 使 
用 RxJS 时 会 感到 很 轻松 ; 因为 在 某 种 意义 上 讲 ， 数 据 集合 和 强大 的 函数 操作 符 同样 适用 于 流 。 

(4) 流 是 可 组 合 的 。 可 以 把 流 想 象 成 一 个 贯穿 数据 的 操作 管道 。 你 可 以 订阅 流 中 的 任何 部 分 ， 
甚至 可 以 组 合 它们 来 创建 新 的 流 。 
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10.2 ”聊天 应 用 概览 


在 本 章 中 ， 我 们 将 使 用 RxJS 构 建 聊 天 应 用 。 界 面 截图 如 图 10-1 所 示 。 





eoe 





DD Angular 2 - Chat with RxJS x 





€ SC  [localhost:8080 





ng-book 2 Messages © 
Echo Bot * 
Il echo whatever you send me 
Reverse Bot 
rdi "t reverse whatever you send me 
Waiting Bot 
Ml wait however many seconds you send to me before responding. Try sending '3* 
Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 
Wi Chat - Echo Bot 


I'll echo whatever you n 
send me 





图 10-1 ”完成 后 的 聊天 应 用 


e 我 们 通常 会 尝试 在 书 中 展现 每 一 行 代码 。 不 过 这 个 聊天 应 用 有 大 量 的 活动 部 件 ， 
所 以 本 章 不 会 展现 所 有 代码 。 


可 以 在 文件 夹 code/rxjs/chat 中 找到 本 章 的 示例 代码 。 在 适当 的 时 候 , 我 们 会 告诉 
你 在 哪里 可 以 找到 你 想 要 查看 的 内 容 。 


本 应 用 提供 了 几 个 机 器 人 ， 你 可 以 和 它们 聊天 。 先 运行 这 些 代码 看 看 : 


cd code/rxjs/chat 
npm install 
npm run go 


AXI tk US asp ]I2Thttp:/localhost:8080., 





如 果 上 面 的 链接 无 法 打开 ， 请 尝试 这 个 链接 : http;//localhost:8080/webpack-dev- 
Serverindex.html。 
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T 一 些 Windows 用 户 在 这 个 目录 下 运行 npm install 时 可 能 会 遇 到 问题 。 如 果 遇 到 
了 ， 请 先 确保 自己 是 在 Cygwin 中 运行 这 些 命令 行 。 
你 在 本 应 用 中 要 注意 以 下 几 点 : 


a 你 可 以 点 击 会 话 Cthread ) 和 一 个 机 器 人 聊天 ; 
口 机 器 人 会 根据 各 自 的 性 格 来 回复 你 的 消息 ; 

口 右上 角 的 未 读 消息 总 数 会 自动 同步 。 

下 面 来 看 看 本 应 用 是 如 何 构造 的 。 我 们 有 : 


口 三 个 顶层 Angular 组 件 
口 三 个 数据 模型 

















口 三 个 服务 
让 我 们 来 逐个 看 看 。 


10.2.1 组 件 
将 页 面 分 解 成 三 个 顶层 组 件 ， 如 图 10-2 所 示 。 








上 内 四 / [5 Angular 2- Chat with xS. x 














€ > Œ [localhost:8080 gel = 


Echo Bot * 


lecho what oi and ii ChatThreads 





Waiting Bot 
VIII wait however many seconds you send to me before responding. Try sendin 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


Reverse Bot 
rg reverse whatever you send me 





ChatWindow 


Wi Chat - Echo Bot 
"eo whatever you n 











图 10-2 ”聊天 应 用 的 顶层 组 件 











(D https://www.cygwin.com/ 
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O ChatNavBar: 包含 未 读 消息 数 。 
口 ChatThreads : 展示 一 个 可 点 击 的 会 话 列表 ， 每 个 会 话 都 包含 最 新 消息 和 会 话 头像 。 
O ChatWindow: 展示 当前 会 话 的 消息 和 一 个 用 来 发 送 新 消息 的 输入 框 。 








10.2.2 ”数据 模型 


本 应 用 同样 包含 三 个 数据 模型 ， 如 图 10-3 所 示 。 


D User: 存储 聊天 参与 者 的 相关 信息 。 
D Message: 存储 一 条 单独 的 信息 。 
O Thread: 存储 一 组 消息 的 集合 以 及 一 些 与 这 次 会 话 有 关 的 其 他 数据 。 











avatarSrc 








图 10-3 ”聊天 应 用 的 数据 模型 


10.2.3 ”服务 




















在 本 应 用 中 ， 每 个 数据 模型 都 有 其 对 应 的 服务 。 服 务 都 是 单 例 对 象 ， 有 以 下 两 个 作用 : 
(1) 提供 应 用 可 以 订阅 的 数据 流 ; 

(2) 提供 操作 符 来 添加 或 更 改 数据 。 

比如 ，UserService: 

口 发 布 一 个 流 用 来 通知 当前 用 户 ; 

O 提供 一 个 setCurrentuUser 函 数 , 用 于 设置 当前 用 户 ( 即 从 currentUser 流 发 出 当前 用 户 )。 








10.2.4 总 结 
大 体 上 来 说 ， 本 应 用 的 数据 架构 很 简明 : 


口 服务 负责 维护 流 ， 而 流 负责 发 出 数据 模型 ( 例如 Message ); 
a 组 件 订阅 这 些 流 并 按照 最 新 的 值 进 行 泻 染 。 


比如 ，chatThreads 组 件 订阅 ThreadService 中 的 流 来 获取 最 新 的 会 话 列 表 ， 而 Chatwindow 
组 件 订阅 ThreadService 中 的 流 来 获取 最 新 的 消息 列表 。 























图 灵 社 区 会 员 xiaochao12312312ff(499290328(9 qq.com) 专 享 尊重 版 权 


10.3 ”实现 数据 模型 227 








本 章 其 余部 分 将 深入 探讨 如 何 使 用 Angular 和 RxJS 来 实现 此 应 用 。 我 们 首先 实现 数据 模型 ， 
然后 看 看 如 何 创 建 服务 来 管理 流 ， 最 后 实现 组 件 。 





10.3 ”实现 数据 模型 
我 们 先 从 简单 的 部 分 开始 ， 看 看 数据 模型 。 





10.3.1 User 





User 类 很 简明 ， 有 idqd、name 和 avatarSrc 三 个 属性 。 





code/rxjs/chat/app/ts/models.ts 
export class User { 


id: string; 


constructor(public name: string, 
public avatarSrc: string) { 
this.id - uuid(); 
j 
j 


O 注意 上 面 的 代码 ， 我 们 在 构造 函数 中 使 用 了 TypeScript 的 简写 方式 。 当 指明 


public name: string 时 ， 我 们 是 在 告诉 TypeScript: (1) 将 name 作 为 类 的 一 个 
公有 属性 ; (2) 当 创 建 一 个 新 的 实例 时 ， 把 参数 的 值 赋 给 这 个 属性 。 


10.3.2 Thread 

















同样 ，Thread 也 是 一 个 简单 的 TypeScript 类 。 


code/rxjs/chat/app/ts/models.ts 


export class Thread { 
id: string; 
lastMessage: Message; 
name: string; 
avatarSrc: string; 


constructor(id?: string, 
name?: string, 
avatarSrc?: string) ( 
this.id - id || uuid(); 
this.name - name; 
this.avatarSrc = avatarSrc; 
j 
j 
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注意 , 我 们 在 Thread 类 中 保存 了 一 个 lastMessage 的 引用 。 这 可 以 使 我 们 在 会 话 列表 中 显示 
最 新 消息 。 


10.3.3 Message 








同样 ， Message 也 是 个 简单 的 TypeScript 类 ， 但 是 这 里 使 用 了 一 个 形式 略微 不 同 的 构造 函数 。 
code/rxjs/chat/app/ts/models.ts 
lastMessage: Message; 
构造 函数 中 的 这 种 模式 允许 我 们 使 用 构造 函数 中 的 关键 字 参 数 进 行 模拟 。 使 用 这 种 模式 ,可 
以 使 用 任意 的 数据 来 创建 一 个 新 的 Message ， 而 且 不 用 担心 参数 的 顺序 问题 。 比 如 ， 我 们 可 以 这 
样 做 : 


let msgi = new Message(); 

















# or this 


let msg2 = new Message({ 
text: "Hello Nate Murray!" 


}) 
看 完了 数据 模型 ,我们 再 来 看 看 第 一 个 服务 : UserService。 








10.4 ”实现 UserService 





UserService 的 意义 在 于 提供 这 样 一 个 场所 : 应 用 可 以 在 这 里 了 解 到 当前 用 户 信 息 ， 并 在 当 
前 用 户 发 生变 化 时 通知 应 用 的 其 他 部 件 。 


我 们 要 做 的 第 一 件 事 是 创建 一 个 TypeScript 类 ， 并 为 它 加 上 @Injectable 注 解 。™ 





code/rxjs/chat/app/ts/services/UserService.ts 


export class UserService ( 
// ^currentUser^ contains the current user 
currentUser: Subject«User» - new BehaviorSubject«User»(null); 


public setCurrentUser(newUser: User): void { 
this.currentUser.next(newUser); 
j 
j 





























注意 ,@Injectable 注 解 表示 该 类 可 以 让 Angular 把 其 他 服务 注入 进来 ， 也 就 是 说 以 该 类 作为 目标 。 因 此 在 创建 
服务 时 ，@Injectable 注 解 并 不 是 必需 的 ， 但 官方 的 风格 指南 明确 建议 我 们 加 上 它 。 一 一 译 者 注 
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我 们 说 这 个 服务 是 可 注入 的 ， 意 思 是 可 以 把 它 注入 到 应 用 中 的 其 他 组 件 中 。 简 
要 来 说 ， 依 赖 注入 有 两 大 优点 
(1) 让 Angular 来 管理 对 象 的 生命 周期 ， 
(2) 测试 组 件 时 更 容易 。 
我 们 在 第 8 章 中 深入 讨论 了 它 。 如 果 你 还 没有 阅读 第 8 章 ， 现 在 只 需要 知道 可 以 
把 它 注 入 到 我 们 的 组 件 中 就 可 以 了 ， 代 码 如 下 

class MyComponent { 


constructor(public userService: UserService) { 
// do something with ^userService^ here 


j 
} 


10.4.1 currentUser 流 


接 下 来 设置 一 个 流 ， 用 来 管理 当前 用 户 。 








code/rxjs/chat/app/ts/services/UserService.ts 


currentUser: Subject«User» - new BehaviorSubject«User»(null); 


这 里 发 生 了 很 多 事 ， 我 们 来 逐一 分 解 : 





口 定义 了 实例 变量 currentUser ， 它 是 一 个 Subject 流 ; 
口 更 准确 地 说 ，currentUser 是 一 个 包含 user 的 BehaviorSub ject ; 
a 然而 ， 这 个 流 的 初始 值 是 nul1 ( 构造 函数 参数 )。 














如 果 你 没 怎么 用 过 RxJS 的 话 ， 那 么 可 能 不 知道 Subject 和 BehaviorSubject 是 什么 。 你 可 以 
把 Subject 当 作 一 个 “ 读 / 写 ” 流 。 


e 从 技术 上 来 说 ，Subject" 同 时 了 继承 Observable” 和 Observer®。 


ne bi STU NUNE 是 流 的 一 个 副作用 ， 
而 BehaviourSubject 弥 补 了 这 


一 点 。 





p 





BehaviourSubject "有 一 个 特殊 的 属性 ， 用 来 存储 最 新 的 值 。 这 意味 着 任何 流 的 订阅 者 都 会 
接收 最 新 的 值 。 这 对 于 我 们 来 说 好 极 了 ， 因 为 这 意味 着 应 用 的 任何 部 分 都 可 以 订阅 
UserService.currentUser 流 并 且 可 以 立即 知道 当前 用 户 是 谁 


Lo 























(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/subject.md 

© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md 

®© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observer.md 

(@ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md 
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10.4.2 ”设置 新 用 户 


当前 用 户 改 变 时 ( 例如 登录 )， 我 们 需要 一 个 途径 将 新 用 户 发 布 到 流 中 。 
有 两 种 暴露 API 的 方法 可 以 做 到 这 件 事 。 
1. 直接 将 新 用 户 添加 到 流 


更 新 当前 用 户 的 最 直接 方法 就 是 使 用 UserService 的 实例 直接 发 布 一 个 新 的 user 对 象 到 流 
如 下 所 示 。 
userService.subscribe((newUser) -» ( 


console.log('New User is: ', newUser.name); 


}) 





























// => New User is: originalUserName 


let u = new User('Nate', 'anImgSrc'); 
userService.currentUser.next(u); 


// => New User is: Nate 


e 注意 ， 这 里 使 用 了 Subject 的 next 方 法 来 推送 一 个 新 值 到 流 中 。 





这 种 做 法 的 好 处 是 可 以 复 用 流 中 现 有 的 API， 不 需要 引入 任何 新 的 代码 或 者 API。 
2. 创建 setCurrentUser(newUser: User) 方 法 
另 一 种 更 新 当前 用 户 的 方法 是 在 UserService 上 创建 一 个 辅助 方法 ， 如 下 所 示 。 























code/rxjs/chat/app/ts/services/UserService.ts 


public setCurrentUser(newUser: User): void { 
this.currentUser.next(newUser); 


] 
你 会 注意 到 我 们 仍然 在 使 用 currentUser 流 的 next 方 法 。 为 何 还 要 这 样 做 呢 ? 
这 样 做 的 价值 在 于 ，currentUser 的 实现 与 流 的 实现 进行 了 解 而。 通过 把 next 方 法 包 焉 在 


























setCurrentUser 方 法 里 ， 我 们 有 一 定 的 空间 来 更 改 UserService 的 实现 而 不 至 于 破坏 实例 。 





在 这 个 例子 中 , 我 不 会 强烈 推荐 其 中 某 一 种 方法 , 但 两 种 方法 在 大 型 项 目 中 的 可 维护 性 上 还 

















是 有 显著 区 别 的 。 


o 第 三 种 选项 是 把 这 些 更 改 暴露 为 它们 自己 的 流 (也 就 是 说 我 们 把 更 改 当 前 用 户 
的 这 个 “动作 ” 放 进 流 中 )。 我 们 会 在 下 面 的 MessagesService 中 探讨 这 种 模式 。 
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10.4.3 UserService.ts 














把 所 有 代码 整合 起 来 ， 可 以 得 到 userService 的 完整 代码 。 


code/rxjs/chat/app/ts/services/UserService.ts 


import {Injectable} from 'Gangular/core'; 
import (Subject, BehaviorSubject) from 'rxjs'; 


import {User} from '../models'; 

/** 

* UserService manages our current user 
*/ 

@Injectable() 


export class UserService { 
// ^currentUser^ contains the current user 
currentUser: Subject«User» - new BehaviorSubject«User»(null); 


public setCurrentUser(newUser: User): void ( 
this.currentUser.next(newUser); 


j 
} 


export var userServiceInjectables: Array«any» = [ 
UserService 


li; 


10.5 MessagesService 





MessagesService 是 这 个 应 用 的 支柱 。 此 应 用 中 的 所 有 消息 都 要 流 经 MessagesService。 
相 比 于 UserService，MessagesService 包 含 一 些 更 复杂 的 流 ， 它 由 五 个 流 组 成 : 三 个 数据 
管理 流 和 两 个 动作 流 。 
三 个 数据 管理 流 分 别 是 : 
口 newMessages， 发 出 每 条 新 Message 并 且 每 条 只 发 出 一 次 ; 
口 messages， 发 出 一 组 当前 的 Messages ; 
口 updates ， 在 messages 流 上 执行 操作 。 

















10.5.1 newMessages 流 





newMessages 是 一 个 Subject ， 用 来 发 出 每 条 新 Message 并 且 每 条 只 发 出 一 次 。 





code/rxjs/chat/app/ts/services/MessagesService.ts 


export class MessagesService { 
// a stream that publishes new messages only once 
newMessages: Subject«Message» - new Subject«Message»(); 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 





232 第 10 章 使 用 可 观察 对 象 的 数据 架构 ， 第 1 部 分 : 服务 








我 们 还 可 以 定义 一 个 辅助 方法 来 添加 Message 到 这 个 流 中 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


addMessage(message: Message): void { 
this.newMessages.next(message); 


] 
有 这 样 的 一 个 流 还 是 很 有 帮助 的 ， 它 可 以 从 一 个 会 话 中 获取 不 属于 某 个 特殊 用 户 的 所 有 消 
息 。 以 回声 机 器 人 (Echo Bot) 为 例 ， 如 图 10-4 所 示 。 


% Chat - Echo Bot 
l'il echo whatever you send me 5m 


e Stop copying me 


A 


Stop copying me m 


图 10-4 回声 机 器 人 

当 实 现 回 声 机 器 人 时 ， 我 们 不 想 进 入 一 个 重复 机 器 人 本 身 消息 的 死 循环 。 

要 实现 这 一 点 ， 我 们 可 以 订阅 newMessages 流 并 根据 下 面 的 条 件 过 滤 所 有 消息 

(1) 是 这 个 会 话 的 一 部 分 ; 

(2) 不 是 机 需 人 产生 的 。 

你 可 以 这 样 理解 ， 对 于 一 个 给 定 的 Thread， 我 们 想 要 一 个 不 包含 这 个 User 的 消息 流 。 
































code/rxjs/chat/app/ts/services/MessagesService.ts 


messagesForThreadUser(thread: Thread, user: User): Observable«Message» { 
return this.newMessages 
.filter((message: Message) => ( 
// belongs to this thread 


return (message.thread.id --- thread.id) && 
// and isn't authored by this user 
(message.author.id !-- user.id); 


}); 
} 


messagesForThreadUser 接收 一 个 Thread 对 象 和 一 个 User 对 象 并 返回 一 个 经 过 筛选 的 新 
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Message 流 。 筛 选 条 件 是 消息 属于 这 个 Thread ， 而 且 不 是 由 这 个 user 写 的 。 也 就 是 说 ， 这 是 一 
在 此 Thread 中 的 其 他 人 的 消息 流 。 








10.5.2 messages 流 


newMessages 流 发 出 单个 的 Message 对 象 ， 而 messages 流 发 出 一 组 最 新 的 Message 对 象 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 
messages: Observable«Message[]»; 


类 型 Message[] 4 E] T Array«Message» , 3 — 4t ^F fr 85 75 ik J£ Observable 


«Array«Message»», 3i X Xmessages ih X Æ JObservable«Message[]» Hj, 
表示 这 个 流 发 出 的 是 一 个 数组 (Message 对 象 的 数组 ), 而 不 是 单个 的 Messages。 





那么 messages 是 如 何 填充 的 呢 ? 为 此 我 们 需要 讨论 updates 流 和 一 种 新 的 模式 : 操作 流 。 


10.5.3 ”操作 流 模 式 


下 面 是 操作 流 模式 的 基本 理念 : 


O 在 messages 流 中 维护 状态 ， 它 会 保存 一 个 最 新 的 Message 数 组 ; 
口 使 用 一 个 updates 流 ， 即 应 用 于 messages 流 的 函数 流 。 


你 可 以 这 样 理解 : 任何 updates 流 上 的 函数 都 会 更 改 当前 的 消息 VIE updates Jii E f} RKI 


应 该 接收 一 个 Message 对 象 列 表 然 后 返回 一 个 Message 对 象 列 表 。 让 我 们 在 代码 中 通过 Saa 
接口 来 使 这 个 概念 形式 化 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


interface IMessagesOperation extends Function { 
(messages: Message[]): Message[]l; 


] 
下 面 来 定义 updates 流 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


// ^updates^ receives operations, to be applied to our "messages" 
// it's a way we can perform changes on xall« messages (that are currently 


// stored in ^messages') 
updates: Subject«any» - new Subject«any»(); 


记 住 ，updates 流 接收 用 来 应 用 到 消息 列表 的 操作 。 但 是 如 何 把 这 些 关 联 起 来 呢 ? 实现 方法 
如 下 ( 在 MessagesService 的 constructor 中 Jo 
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code/rxjs/chat/app/ts/services/MessagesService.ts 


constructor() { 
this.messages - this.updates 
// watch the updates and accumulate operations on the messages 
.scan((messages: Message[], 
operation: IMessagesOperation) -» { 
return operation(messages); 
), 
initialMessages) 
// make sure we can share the most recent list of messages across anyone 


这 段 代码 引入 了 新 的 流 函 数 : scan”。 如 果 你 熟悉 函数 式 编程 的 话 ，scan 很 像 reduce : 它 为 
输入 流 中 的 每 个 元 素 运 行 函数 并 累加 出 一 个 值 。scan 的 特别 之 处 在 于 , 它 会 把 每 个 中 间 过 程 中 计 
算出 的 结果 值 发 送出 去 。 也 就 是 说 , 它 不 会 等 到 流 全 部 完成 后 再 发 送 结果 值 ; 这 正 是 我 们 想 要 的 。 


当 调 用 this.updates.scan 时 ， 我 们 会 创建 一 个 新 的 流 。 这 个 流 订 阅 了 updates 流 。scan 内 
部 执行 的 每 一 次 ， 我 们 都 会 得 到 : 


(1) 经 过 累加 的 messages 流 ; 
(2) 将 要 应 用 的 新 operation 8 
然后 返回 新 的 Message[] 。 
























































关于 流 ， 你 需要 知道 的 一 点 是 它们 默认 是 不 可 共享 的 。 也 就 是 说 ， 如 果 一 个 订阅 者 从 流 中 读 
取 了 一 个 值 ， 读 完 后 这 个 值 就 永远 消失 了 。 在 这 个 例子 中 ， 我 们 想 : (1) 在 一 些 订阅 者 之 间 共 享 
同样 的 流 ; (2) 为 任何 未 来 的 订阅 者 重播 最 新 的 值 。 

要 做 到 这 点 ， 我 们 使 用 操作 符 publishReplay 和 refCount。 
口 publishReplay 可 以 让 我 们 在 多 个 订阅 者 之 间 共 享 同一 个 订阅 ， 并 为 未 来 的 订阅 者 重播 n 
个 最 新 的 值 。( 参见 publish“ 和 replay® ) 
口 refCount “通过 对 可 观察 对 象 何 时 发 出 值 进行 管理 ， 使 publish 方 法 的 返回 值 用 起 来 更 加 

方便 。 






































(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/scan.md 

© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/publish.md 
®© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/replay.md 
(9 https:;//github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/refcount.md 
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等 等 ，refCount 到 底 是 干什么 的 ? 

refCount 可 能 有 一 些 不 太 好 理解 ， 因 为 它 涉及 一 个 如 何 管 理 “ 热 ”的 可 观察 对 

象 和 “ 冷 ” 的 可 观察 对 象 。 我 们 不 打算 深入 讲解 它 的 工作 原理 ， 读 者 可 自行 阅 

读 相关 文档 。 

O 关于 refCount 的 RxJS 文 档 : https://github.com/Reactive-Extensions/RxJS/blob/ 
master/doc/api/core/operators/refcount.md 

口 “Rx 介 绍 :“ 热 "的 可 观察 对 象 和 “ 冷 ' 的 可 观察 对 象 ”: http://www.introtorx.com/ 
Content/ v1.0.10621.0/14 HotAndColdObservables.html#RefCount 

口 refCount 弹 珠 图 解 : http://reactivex.io/documentation/operators/refcount.html 


code/rxjs/chat/app/ts/services/MessagesService.ts 


// watch the updates and accumulate operations on the messages 
.scan((messages: Message[], 

operation: IMessagesOperation) -» { 

return operation(messages); 
) 

initialMessages) 
// make sure we can share the most recent list of messages across anyone 
// who's interested in subscribing and cache the last known list of 
// messages 
.publishReplay(1) 
.refCount(); 


10.5.5 }E Message 对 象 添加 到 messages 流 中 
现在 我 们 可 以 把 一 个 Message 对 象 添 加 到 messages 流 中 ， 如 下 所 示 : 


var myMessage = new Message(/* params here... x/); 

updates.next( (messages: Message[]): Message[] => ( 
return messages.concat(myMessage); 

I» 


我 们 添加 了 一 个 操作 到 updates 流 中 。 因 为 nessages 流 订阅 了 updates 流 ， 所 以 它 会 应 用 这 
个 操作 ， 而 操作 会 使 用 concat 把 我 们 的 newMessage 合 并 到 累加 的 messages 列 表 之 中 。 





如 果 这 里 需要 花费 你 一 些 时 间 来 仔细 思考 ， 也 没有 关系 。 要 是 你 不 习惯 这 种 编 
程 风格 的 话 ， 是 会 感觉 有 些 陌生 。 












































上 面 的 方法 有 一 个 问题 , 那 就 是 它 使 用 起 来 有 些 繁琐 。 要 是 不 用 每 次 都 写 这 种 内 部 函数 就 好 
了 。 我 们 可 以 像 下 面 这样 做 : 


addMessage(newMessage: Message) ( 
updates.next( (messages: Message[]): Message[] => { 
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return messages .concat(newMessage ) ; 


}) 
} 


// somewhere else 


var myMessage = new Message(/x params here... x/); 
MessagesService.addMessage(myMessage); 


现在 好 一 些 了 ,但 它 还 不 是 “响应 式 的 方式 ”。 这 是 因为 这 种 创建 消息 的 行为 不 能 和 其 他 流 
组 合 。( 该 方法 也 绕 过 了 newMessage 流 。 稍 后 将 进行 更 详细 的 讨论 。) 

创建 新 消息 的 响应 式 做 法 是 用 一 个 人 消息 列表 中 。 再 次 声 
明 ， 如 果 你 还 没有 习惯 这 种 思维 方式 的 话 ， 那 么 这 对 于 你 来 说 会 有 些 陌生 。 下 面 介绍 实现 它 的 
方法 。 

首先 ， 我们 创建 一 个 叫 作 create 的 动作 流 。( 动作 流 这 个 术语 只 是 用 来 描述 它 在 服务 中 的 角 
色 。 这 个 流 本 身 只 是 一 个 普通 的 Subject。 ) 


code/rxjs/chat/app/ts/services/MessagesService.ts 



















































































// action streams 
create: Subject«Message» - new Subject«Message»(); 


接 下 来 ,我 们 在 构造 函数 中 配置 了 create 流 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


this.create 
.map( function(message: Message): IMessagesOperation { 

return (messages: Message[]l) => { 

return messages.concat(message); 


s 
p 


map 操 作 符 " 和 JavaScript 中 内 置 的 Array .map 很 像 ， 只 不 过 它 是 在 流 上 的 工作 。 也 就 是 说 ， 它 
为 流 中 的 每 一 项 运行 函数 并 发 出 函数 的 返回 值 。 

在 这 个 例子 中 ， 我 们 的 意思 是 “对 于 我 们 接收 并 作为 输入 的 每 个 Message 对 象 来 说 ， 都 返回 
IMesosdesoperaetons 它 会 把 这 个 消息 添加 到 消息 列表 中 ”。 换 句 话 说, 这 个 流 会 发 出 一 个 函数 ， 
这 个 函数 接收 Message 对 象 的 列表 并 把 这 个 Message 对 象 添 加 到 消息 列表 中 。 

现在 有 了 create 流 ， 还 有 一 件 事 要 做 : 实际 上 ， 我 们 需要 把 create 流 连接 到 updates 流 。 我 
们 使 用 subscribe ?来 完成 。 





























(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/select.md 
© https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md 
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code/rxjs/chat/app/ts/services/MessagesService.ts 


this.create 
.map( function(message: Message): IMessagesOperation { 
return (messages: Message[]l) => ( 
return messages.concat(message); 
F; 
}) 


.subscribe(this.updates); 


我 们 在 这 里 所 做 的 就 是 订阅 updates 流 来 监听 create 流 。 这 表示 ， 如 果 create 流 接收 了 一 个 
Message 对 象 ， 那 么 它 会 发 出 一 个 IMessagesOperation; updates 流 会 接收 这 个 IMessages- 
Operation ， 然 后 把 Message 对 象 添加 到 messages 流 中 。 


图 10-5 展 现 了 当前 的 情况 。 


updates messages 


Message 消息 操作 


(关闭 newMessage) 


—- 


把 newMessage 


加 入 messages 

















图 10-5 ”从 create 流 开始 创建 新 消 , 
这 很 棒 ! 因为 它 意 味 着 我 们 : 

(1) 从 messages 流 中 获取 了 当前 消息 列表 ; 

(D) 获得 了 在 当前 消息 列表 上 进行 操作 的 一 种 方式 ( 通过 updates 流 ); 

(3) 通过 一 个 简单 易 用 的 流 把 创建 操作 放 在 了 updates 流 上 (通过 create 流 )。 


不 论 在 代码 的 什么 地 方 ,， 只 要 想 获 取 最 新 消息 列表 , 就 必须 要 用 messages 流 。 但 是 还 有 一 个 
问题 ， 我 们 还 没有 把 这 个 流程 和 newMessages 流 关联 起 来 。 


如 果 有 一 种 方式 可 以 轻松 地 把 这 个 流 和 任何 newMessages 流 发 出 的 Message 关 联 起 来 ， 那 就 


ED 
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太 好 了 。 事 实证 明 这 很 容易 。 


code/rxjs/chat/app/ts/services/MessagesService.ts 


this.newMessages 
.subscribe(this.create); 


现在 的 情况 如 图 10-6 所 示 。 





newMessages updates messages 


newMessage: 
Message 





newMessage w—— E 消息 操作 ES 
(关闭 newMssgae) 
把 newMessage 
加 入 messages 




















10-6 ”从 newMessages 流 开始 创建 新 消息 


现在 的 流程 完整 了 1 这 也 是 两 全 其 美的 : 我 们 能 够 通过 订阅 newMessages 来 获取 单条 消息 ; 
而 如 果 只 想 要 最 新 的 消息 列表 ， 我 们 可 以 订阅 mhessages 流 。 























这 里 需要 指出 这 个 设计 的 一 些 影响 : 如 果 你 直接 订阅 了 newMessages 流 ， 必 须 
要 注意 变化 可 能 发 生 在 下 游 。 这 里 有 三 点 需要 考虑 。 

第 一 ， 显 然 不 会 有 任何 下 游 的 更 新 应 用 于 Message。 

第 二 ， 在 这 个 案例 中 ， 我 们 的 Message 对 象 是 可 变 的 。 如 果 你 订阅 newMessages 
流 并 保存 了 Message 的 引用 ， 那 么 这 个 Message 的 属性 可 能 会 产生 变化 。 

第 三 ， 如 果 想 利用 Message 的 可 变性 , 你 可 能 无 法 做 到 。 考 虑 这 种 情况 : 我 们 可 
以 在 updates 流 队列 上 增加 一 个 操作 ， 此 操作 复制 每 个 Message 然 后 改变 这 个 副 
本 。( 与 我 们 现在 的 做 法 相 比 ， 这 应 该 是 更 好 的 设计 。) 在 这 个 例子 中 ， 你 不 能 
依赖 任何 从 newMessages 流 直接 发 出 的 Message， 因 为 它们 是 可 以 改变 的 。 
尽管 如 此 ， 只 要 你 记 住 这 些 注 意 事项 ， 就 应 该 不 会 有 太 大 麻烦 。 


10.5.6 ”完整 的 MessagesService 


完整 的 MessagesService 代 码 如 下 。 
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code/rxjs/chat/app/ts/services/MessagesService.ts 


import {Injectable} from 'Gangular/core'; 
import (Subject, Observable} from 'rxjs'; 
import (User, Thread, Message] from '../models'; 


let initialMessages: Message[] - []; 


interface IMessagesOperation extends Function { 
(messages: Message[]): Message[]l; 


} 


@Injectable() 

export class MessagesService { 
// a stream that publishes new messages only once 
newMessages: Subject«Message» - new Subject«Message»(); 


// ^messages? is a stream that emits an array of the most up to date messages 
messages: Observable«Message[]»; 


// ^updates^ receives operations, to be applied to our "messages" 

// it's a way we can perform changes on xall« messages (that are currently 
// stored in ^messages') 

updates: Subject«any» - new Subject«any»(); 


// action streams 
create: Subject«Message» - new Subject«Message»(); 
markThreadAsRead: Subject«any» - new Subject«any»(); 





constructor() { 
this.messages - this.updates 
// watch the updates and accumulate operations on the messages 
.scan((messages: Message[], 
operation: IMessagesOperation) -» { 
return operation(messages); 
F; 
initialMessages) 
// make sure we can share the most recent list of messages across anyone 
// who's interested in subscribing and cache the last known list of 
// messages 
.publishReplay(1) 
.refCount(); 





// ^create^ takes a Message and then puts an operation (the inner function) 
// on the ^updates^ stream to add the Message to the list of messages. 


// That is, for each item that gets added to ^create^ (by using `next`) 
// this stream emits a concat operation function. 


// Next we subscribe ^this.updates^ to listen to this stream, which means 
// that it will receive each operation that is created 


// Note that it would be perfectly acceptable to simply modify the 
// "addMessage" function below to simply add the inner operation function to 


图 灵 社 区 会 员 xiaochao12312312ff(499290328(9 qq.com) zs 尊重 版 权 


240 


第 10 章 使 用 可 观察 对 象 的 数据 架构 ， 第 1 部 分 : 服务 





// the update stream directly and get rid of this extra action stream 
// entirely. The pros are that it is potentially clearer. The cons are that 
// the stream is no longer composable. 
this.create 
.map( function(message: Message): IMessagesOperation { 
return (messages: Message[]l) => ( 
return messages .concat(message); 
5 
) 


.subscribe(this.updates); 


this.newMessages 
.subscribe(this.create); 


// similarly, ^markThreadAsRead' takes a Thread and then puts an operation 

// on the ^updates^ stream to mark the Messages as read 

this.markThreadAsRead 

.map( (thread: Thread) => { 
return (messages: Message[]l) => ( 
return messages.map( (message: Message) => { 

// note that we're manipulating ^message' directly here. Mutability 
// can be confusing and there are lots of reasons why you might want 
// to, say, copy the Message object or some other 'immutable' here 


if (message.thread.id --- thread.id) ( 
message.isRead - true; 
j 
return message; 
Dp 
k; 
}) 


.subscribe(this.updates); 


// an imperative function call to this action stream 
addMessage(message: Message): void ( 
this.newMessages.next(message); 


} 


messagesForThreadUser(thread: Thread, user: User): Observable«Message» { 
return this.newMessages 
.filter((message: Message) => { 
// belongs to this thread 


return (message.thread.id --- thread.id) && 
// and isn't authored by this user 
(message.author.id !-- user.id); 
DE 


export var messagesServiceInjectables: Array«any» = [ 


MessagesService 


I; 
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10.5.7 试用 MessagesService 











如 果 你 还 没有 完全 理解 ， 那 么 现在 是 个 打开 代码 并 随意 尝试 MessagesService 的 好 时 机 ， 来 感 
受 一 下 它 是 如 何 运 作 的 。 在 test/services/MessagesService.spec.ts 中 有 一 个 示例 ， 可 以 直接 拿 来 使 用 。 




















e 要 运行 这 个 项 目的 测试 ， 可 以 打开 终端 ， 然 后 输入 以 下 代码 : 


cd /path/to/code/rxjs/chat // «-- your path will vary 
npm install 
karma start 





首先 创建 一 些 数据 模型 的 实例 。 


code/rxjs/chat/test/services/MessagesService.spec.ts 


import [MessagesService] from '../../app/ts/services/services'; 
import (Message, User, Thread] from '../../app/ts/models'; 


describe('MessagesService', () => { 
it('should test', () => { 


let user: User - new User('Nate', ''); 
let thread: Thread = new Thread('ti', 'Nate', ''); 
let m1: Message = new Message(Í 


author: user, 
text: 'Hi!', 
thread: thread 


5; 


let m2: Message = new Message(Íí 
author: user, 

text: 'Bye!', 

thread: thread 

D; 


接 下 来 ， 订 阅 几 个 流 。 








code/rxjs/chat/test/services/MessagesService.spec.ts 


let messagesService: MessagesService - new MessagesService(); 


// listen to each message indivdually as it comes in 
messagesService.newMessages 
.subscribe( (message: Message) => ( 
console.log('-2» newMessages: ' + message.text); 


); 


// listen to the stream of most current messages 
messagesService.messages 
.subscribe( (messages: Message[]l) => { 
console.log('-» messages: ' + messages.length); 


}); 
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messagesService.addMessage(m1); 
messagesService.addMessage(m2); 


// => messages: 1 
// => newMessages: Hi! 
// => messages: 2 
// => newMessages: Bye! 


); 


IDE 


主意 , 尽管 我 们 先 订 阅 了 newMessages 并 且 newMessages 是 通过 addMessage 方 法 直接 调用 的 , 
证 了 日 志 。 原 因 就 是 messages 流 订阅 newMessages 流 早 于 测试 代码 中 
( 当 MessagesService 实 例 化 时 )。( 你 不 应 该 依赖 于 代码 中 单独 的 流 的 顺序 , 但 是 它 为 什 

这 种 方式 运行 是 值得 思考 的 。) 


尝试 使 用 MessagesService 并 感受 一 下 这 些 流 是 如 何 工 作 的 。 我 们 将 在 下 节 中 使 用 它们 来 构 
建 ThreadsService。 























10.6 ThreadsService 


在 ThreadsService 中 将 定义 四 个 流 ， 它 们 分 别 发 出 : 

(1) 当前 一 组 Thread 的 映射 (threads 流 ); 

(2) 按时 间 逆 序 排列 的 Thread 列 表 (orderedthreads 流 ); 

(3) 当前 已 选 的 Thread (currentThread 流 ); 

(4) 当前 已 选 Thread 的 Message 列 表 (currentThreadMessages 流 )。 


下 面 来 讨论 如 何 构建 这 里 的 每 一 个 流 。 在 这 个 过 程 中 ， 我 们 还 将 学 习 更 多 关于 RxJS 的 知识 。 


10.6.1 ”当前 一 组 Thread 的 映射 (threads 流 ) 
我 们 先 来 定义 ThreadsService 类 和 用 来 发 出 Thread 的 实例 变量 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


import {Injectable} from 'Gangular/core'; 

import (Subject, BehaviorSubject, Observable} from 'rxjs'; 
import (Thread, Message] from '../models'; 

import [MessagesService] from './MessagesService'; 

import x* as _ from 'underscore'; 


GInjectable() 
export class ThreadsService { 
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// ^threads^ is a observable that contains the most up to date list of threads 
threads: Observable«( [key: string]: Thread }>; 


注意 ， 这 个 流 会 发 出 一 个 映射 ( 即 一 个 对 象 )， 将 Thread 的 id 作为 string 键 ，Thread 本 身 作 
为 值 。 
要 创建 一 个 用 来 维护 当前 会 话 列表 的 流 ， 我 们 先 附加 到 messagesService.messages 流 。 





code/rxjs/chat/app/ts/services/ThreadsService.ts 
threads: Observable«( [key: string]: Thread }>; 


回忆 一 下 , 每 次 把 一 个 新 的 Message 对 象 添 加 到 流 时 ,messages 流 都 会 发 出 一 个 当前 Message 
对 象 的 数组 。 我 们 要 查看 每 个 Message 对 象 并 返回 唯一 的 Threads 列 表 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.threads - messagesService.messages 
.map( (messages: Message[]) => { 
let threads: ([key: string]: Thread) = {}; 
// Store the message's thread in our accumulator ^threads^ 
messages.map((message: Message) => ( 
threads [message.thread.id] = threads[message.thread.id] |l 
message .thread; 


注意 ， 每 次 都 会 创建 一 个 新 的 threads 列 表 。 这 样 做 的 原因 是 ， 我 们 可 能 会 彻底 删除 一 些 消 
息 (例如 离开 对 话 )。 因 为 每 次 我 们 都 重新 计算 会 话 列表 ， 所 以 自然 而 然 地 “删除 ”了 没有 消息 
的 会 话 。 

在 会 话 列表 中 ， 我 们 想 通 过 使 用 Thread 中 的 最 新 Message 来 显示 聊天 预览 。 


Echo Bot 。 
l'il echo whatever you send me 
Reverse Bot 

- l'Il reverse whatever you send me 
Waiting Bot 
l'il wait however many seconds you send 
to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the 
friend which you weep for. 


图 10-7 带 有 聊天 预览 功能 的 会 话 列 表 


要 做 到 这 一 点 ,我 们 在 每 个 Thread 中 都 保存 了 最 新 的 Message。 通 过 比较 sentAt 时 间 就 可 以 
知道 哪个 Message 是 最 新 的 。 
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code/rxjs/chat/app/ts/services/ThreadsService.ts 


// Cache the most recent message for each thread 
let messagesThread: Thread = threads [message.thread.id]; 
if (!messagesThread.lastMessage |l 
messagesThread.lastMessage.sentAt < message.sentAt) { 
messagesThread.lastMessage - message; 
j 
15 
return threads; 


IDE 
把 所 有 代码 整合 起 来 ，threads 流 看 起 来 如 下 所 示 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.threads - messagesService.messages 
.map( (messages: Message[]) => { 
let threads: {[key: string]: Thread] = {}; 
// Store the message's thread in our accumulator ^threads^ 
messages.map((message: Message) => { 
threads [message.thread.id] = threads[message.thread.id] |l 
message .thread; 


// Cache the most recent message for each thread 
let messagesThread: Thread = threads [message.thread.id]; 
if (!messagesThread.lastMessage |l 
messagesThread.lastMessage.sentAt < message.sentAt) { 
messagesThread.lastMessage - message; 


} 
1) 
return threads; 
Hs 
试用 ThreadsService 





我 们 来 试 试 ThreadsService。 首 先 创 建 一 些 要 用 的 数据 模型 。 


code/rxjs/chat/test/services/ThreadsService.spec.ts 


import (MessagesService, ThreadsService] from '../../app/ts/services/services'; 
import (Message, User, Thread] from '../../app/ts/models'; 
import x as _ from 'underscore'; 


describe('ThreadsService', () => ( 
it('should collect the Threads from Messages', () => { 


let nate: User - new User('Nate Murray', ''); 

let felipe: User - new User('Felipe Coury', ''); 
let ti: Thread = new Thread('ti', 'Thread 1', ''); 
let t2: Thread - new Thread('t2', 'Thread 2', ''); 








let m1: Message = new Message(Í 
author: nate, 
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text: 'Hi!', 
thread: t1 
DE 


let m2: Message = new Message(Í 
author: felipe, 

text: 'Where did you get that hat?', 
thread: t1 


}); 


let m3: Message = new Message({ 

author: nate, 

text: 'Did you bring the briefcase?', 
thread: t2 


135. 
创建 服务 的 一 个 实例 。 








code/rxjs/chat/test/services/ThreadsService.spec.ts 


let messagesService: MessagesService - new MessagesService(); 
let threadsService: ThreadsService - new ThreadsService(messagesService); 


e 注意 ， 这 里 把 messagesService 作 为 参数 传 给 了 ThreadsService 的 构造 函数 。 
我 们 通常 让 依赖 注入 系统 来 处 理 这 些 ， 但 在 测试 中 可 以 自己 提供 依赖 关系 。 
我 们 订阅 threads 流 并 把 通过 流 的 内 容 打 印 出 来 。 
code/rxjs/chat/test/services/ThreadsService.spec.ts 

let threadsService: ThreadsService - new ThreadsService(messagesService); 


threadsService.threads 
.subscribe( (threadIdx: { [key: string]: Thread }) => ( 


let threads: Thread[] ..values(threadIdx); 

let threadNames: string = |.map(threads, (t: Thread) => t.name) 
.join(', '); 

console.log(^-» threads ($[threads.length]): $[threadNames] ^); 


J) 


messagesService.addMessage(m1); 
messagesService.addMessage(m2); 
messagesService.addMessage(m3); 


// => threads (1): Thread 1 
// => threads (1): Thread 1 
// => threads (2): Thread 1, Thread 2 


DP 
5; 
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10.6.2 ”按时 间 逆 序 排列 的 Thread 列表 (orderedthreads 流 ) 


threads 流 给 了 我 们 一 个 映射 ， 作 为 会 话 列 表 的 一 个 “索引 ”。 但 是 我 们 想 让 会 话 视 图 根据 最 
新 消息 的 时 间 来 排序 ， 如 图 10-8 所 示 。 


Echo Bot * 
I'll echo whatever you send me 
Reverse Bot 

- l'il reverse whatever you send me 
Waiting Bot 
I'll wait however many seconds you send 
to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the 
friend which you weep for. 


图 10-8 按时 间 逆 序 排 列 的 会 话 
创建 一 个 新 的 流 ， 它 返回 一 个 按 最 新 Message 时 间 排 序 的 Thread 数 组 。 
我 们 首先 定义 orderedThreads 并 把 它 作 为 一 个 实例 属性 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 























38] 





// ^orderedThreads^ contains a newest-first chronological list of threads 
orderedThreads: Observable«Thread[]»; 


接 下 来 ,在 constructor 中 通过 订阅 threads 流 并 按 最 新 消息 时 间 排 序 定义 orderedThreads。 





code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.orderedThreads - this.threads 
.map((threadGroups: { [key: string]: Thread }) => { 
let threads: Thread[] = ..values(threadGroups); 
return  .sortBy(threads, (t: Thread) => t.lastMessage.sentAt).reverse(); 


»i E 


10.6.3 ”当前 已 选 的 Thread (currentThread 流 ) 
我 们 的 应 用 需要 知道 当前 已 选 的 Thread 是 哪个 。 这 让 我 们 知道 
(1) 哪个 会 话 应 该 在 消息 窗口 显示 ; 
(2) 会 话 列表 中 的 哪个 会 话 应 该 被 标记 为 当前 会 话 ( 如 图 10-9 所 示 )。 
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I'll echo whatever you send me 


Reverse Bot * 


l'Il reverse whatever you send me 


l'il wait however many seconds you send to me before responding. Try sending '3 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


[1 Waiting Bot 





图 10-9 使 用 ' 符号 表示 当前 会 话 








创建 一 个 BehaviorSubject 并 把 它 保 存 为 currentThread 流 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


// ^currentThread? contains the currently selected thread 
currentThread: Subject«Thread» - 
new BehaviorSubject«Thread»(new Thread()); 


注意 ,这 里 分 配 了 一 个 空 的 Thread 作 为 默认 值 。 我 们 不 再 需要 对 currentThread 进 行 更 多 配 
置 了 。 


1. 设置 当前 会 话 

要 设置 当前 会 话 ，currentThread 流 可 以 选择 下 面 的 其 中 一 个 方法 : 

(1) 直接 通过 next 方 法 提交 新 会 话 ; CN 
(2) 添加 一 个 辅助 函数 提交 新 会 话 。 

我 们 定义 一 个 辅助 函数 setCcurrentThread， 可 以 使 用 它 来 设置 下 一 个 会 话 。 



























































code/rxjs/chat/app/ts/services/ThreadsService.ts 


setCurrentThread(newThread: Thread): void { 
this.currentThread.next(newThread); 


) 
2. 标记 当前 会 话 为 已 读 


我 们 想 要 记录 未 读 消息 数量 。 如 果 切 换 到 一 个 新 Thread， 要 把 那个 Thread 中 的 所 有 Message 
都 标记 为 已 读 。 我 们 拥有 做 到 这 些 所 需 的 工具 


(1) messagesService.makeThreadAsRead 接 收 一 个 Thread ， 然 后 把 这 个 Thread 中 的 所 有 
Message 都 标记 为 已 读 ; 


(2) currentThread 流 发 出 单个 的 Thread， 它 代表 当前 Thread。 
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要 做 的 就 是 把 它们 关联 起 来 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 





this.currentThread.subscribe(this.messagesService.markThreadAsRead); 


10.6.4 ”当前 已 选 Thread 的 Message 列表 (currentThreadMessages 流 ) 





现在 有 了 当前 已 选 会 话 ， 需 要 确保 显示 这 个 Thread 的 Message 列 表 ( 如 图 10-10 所 示 )。 


Vli Chat - Reverse Bot 





l'Il reverse whatever you send me n 
6" 

Pw 

i n 
| Write your message here. Eg 

l 





图 10-10 ”当前 消息 列表 来 自 反 转机 器 人 (Reverse Bot ) 
它 的 实现 比 表 面 上 看 起 来 要 复杂 一 些 。 我 们 这 样 来 实现 它 : 


var theCurrentThread: Thread; 





this.currentThread.subscribe((thread: Thread) => { 
theCurrentThread = thread; 


}) 


this.currentThreadMessages .map( 
(mesages: Message[]) => { 
return _.filter(messages, 
(message: Message) => { 
return message.thread.id == theCurrentThread.id; 
p 
}) 


这 种 方法 有 什么 问题 ? 如 果 currentThread 改 变 了 ， 而 currentThreadMessages 完 全 不 知道 5 
那么 currentThreadMessages 就 是 一 个 过 时 了 的 消息 列表 ! 


MRA — PUE? 在 一 个 变量 中 保存 当前 消息 列表 ， 然 后 订阅 currentThread 流 的 变化 ,会 
发 生 什么 呢 ? 还 是 会 有 同样 的 问题 ， 只 是 这 次 我 们 知道 会 话 变化 ， 但 是 不 知道 有 新 消息 进来 。 
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如 何 解 决 这 个 问题 呢 ? 


原来 ，RxJS 有 一 组 操作 符 用 来 合并 多 个 流 。 在 这 个 例子 中 ， 我 们 想 说 的 是 “如 果 current- 
Thread 和 和 messagesService.messages 中 的 任何 一 个 改变 了 ,那么 就 要 发 出 一 些 东 西 ”。 为 此 , 我 
们 使 用 combineLatest 操 作 符 ”。 




















code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.currentThreadMessages - this.currentThread 
.combineLatest(messagesService.messages, 
(currentThread: Thread, messages: Message[]l) => { 


当 合并 两 个 流 时 ,会 有 一 个 先 到 达 , 不 能 保证 在 两 个 流 上 都 有 值 ， 所 以 需要 检查 以 确保 有 我 
们 所 需要 的 ; 否则 就 会 返回 一 个 空 列 表 。 


现在 有 了 当前 会 话 和 消息 列表 ， 就 可 以 过 滤 出 我 们 想 要 的 消息 了 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.currentThreadMessages - this.currentThread 
.combineLatest(messagesService.messages, 
(currentThread: Thread, messages: Message[]l) => { 
if (currentThread && messages.length > 0) { 
return  .chain(messages) 


.filter((message: Message) => 
(message.thread.id --- currentThread.id)) 


还 有 一 个 细节 : 既然 我 们 已 经 找到 了 当前 会 话 的 消息 , 把 这 些 消 息 标记 为 已 读 就 是 很 方便 的 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 
return  .chain(messages) CN 
.filter((message: Message) => 


(message.thread.id --- currentThread.id)) 
.map((message: Message) => { 
message.isRead - true; 
return message; }) 
.value(); 





A 关于 是 否 应 该 在 这 里 把 消息 标记 为 已 读 是 有 争议 的 。 标 记 为 已 读 的 最 大 缺点 就 
是 我 们 更 改 了 对 象 本 身 ， 而 本 质 上 这 是 一 个 “只 读 ” 会 话 。 也 就 是 说 ， 这 是 一 
个 有 副作用 的 读 操作 , 一 般 不 应 该 使 用 .尽管 如 此 ,本 应 用 中 的 currentThread- 
Messages 流 只 作用 于 currentThread 流 ,而 currentThread 流 应 始终 把 它 的 消息 

标记 为 已 读 。 不 过 ， 我 通常 不 推荐 “有 副作用 的 读 操作 ”模式 。 





把 所 有 代码 整合 起 来 ，currentThreadMessages 看 起 来 是 这 样 的 。 





(D https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/combinelatestproto.md 
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code/rxjs/chat/app/ts/services/ThreadsService.ts 


this.currentThreadMessages - this.currentThread 
.combineLatest(messagesService.messages, 
(currentThread: Thread, messages: Message[]l) => { 
if (currentThread && messages.length > 0) { 
return  .chain(messages) 
.filter((message: Message) => 
(message.thread.id --- currentThread.id)) 
.map((message: Message) => { 
message.isRead - true; 
return message; ]) 
.value(); 
) else { 
return []; 
j 
py 


10.6.5 “完整 的 ThreadsService 


ThreadService 完 整 代 码 如 下 所 示 。 


code/rxjs/chat/app/ts/services/ThreadsService.ts 


import {Injectable} from 'Gangular/core'; 

import (Subject, BehaviorSubject, Observable} from 'rxjs'; 
import (Thread, Message] from '../models'; 

import [MessagesService] from './MessagesService'; 

import x as _ from 'underscore'; 


GInjectable() 
export class ThreadsService { 


// ^threads^ is a observable that contains the most up to date list of threads 
threads: Observable«( [key: string]: Thread }>; 





// ^orderedThreads^ contains a newest-first chronological list of threads 
orderedThreads: Observable«Thread[]»; 


// ^currentThread? contains the currently selected thread 
currentThread: Subject«Thread» - 
new BehaviorSubject«Thread»(new Thread()); 


// ^currentThreadMessages^ contains the set of messages for the currently 
// selected thread 


currentThreadMessages: Observable«Message[]»; 





constructor(private messagesService: MessagesService) { 


this.threads - messagesService.messages 
.map( (messages: Message[]) => { 
let threads: {[key: string]: Thread] = {}; 
// Store the message's thread in our accumulator ^threads^ 
messages.map((message: Message) => { 
threads [message.thread.id] = threads[message.thread.id] |l 
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message.thread; 


// Cache the most recent message for each thread 
let messagesThread: Thread - threads[message.thread.id]; 
if (!messagesThread.lastMessage || 
messagesThread.lastMessage.sentAt < message.sentAt) { 
messagesThread.lastMessage - message; 
j 
F); 


return threads; 


); 


this.orderedThreads - this.threads 
.map((threadGroups: { [key: string]: Thread }) => { 
let threads: Thread[] - ..values(threadGroups); 
return  .sortBy(threads, (t: Thread) => t.lastMessage.sentAt).reverse(); 


93 


this.currentThreadMessages - this.currentThread 
.combineLatest(messagesService.messages, 
(currentThread: Thread, messages: Message[]l) => { 
if (currentThread && messages.length > 0) { 
return  .chain(messages) 
.filter((message: Message) => 
(message.thread.id --- currentThread.id)) 
.map((message: Message) => { 
message.isRead - true; 
return message; ]) 
.value(); 
) else { 
return []; 





} 
); 





this.currentThread.subscribe(this.messagesService.markThreadAsRead); 


} 


setCurrentThread(newThread: Thread): void { 
this.currentThread.next(newThread); 


j 
】 


export var threadsServiceInjectables: Array«any» = [ 
ThreadsService 


Is 


10.7 i£ 


数据 模型 和 服务 已 经 完成 ! 现在 , 我 们 拥有 了 连接 到 视图 组 件 所 需要 的 一 切 ! 在 下 章 中 , 我 
们 将 构建 三 个 重要 的 组 件 ， 用 来 泻 染 页 面 并 和 本 章 所 创建 的 流 进行 交互 。 
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11.4 构建 视图 : 顶层 组 件 ChatApp 
现在 把 注意 力 转向 应 用 并 来 完成 视图 组 件 。 





为 了 简洁 以 及 节省 空间 起 见 ， 本 章 会 省 去 一 些 import 声 明 、CSS 和 一 些 其 他 类 
似 的 代码 行 。 如 果 你 对 这 些 细节 的 每 一 行 代码 都 感 兴 趣 的 话 ， 可 以 打开 示例 代 
码 ， 那 里 党 括 了 运行 程序 所 需要 的 一 切 。 

















首先 要 做 的 就 是 创建 顶层 组 件 chat-app。 
正如 之 前 讨论 过 的 ， 页 面 会 被 分 解 成 三 个 顶层 组 件 ( 如 图 11-1 所 示 )。 


口 ChatNavBar: 包含 未 读 消 息 数 。 
口 ChatThreads : 展示 一 个 可 点 击 的 会 话 列表 ， 每 个 会 话 都 包含 最 新 消息 和 会 话 头 像 。 
口 Chatwindow: 展示 当前 会 话 的 消息 和 一 个 用 来 发 送 新 消息 的 输入 框 。 
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息 C O ， 门 Angularz - Chat with Rxus x 











€ SC  [localhost:8080 ies 
m—A— 


5 Mid ChatThreads 


IIl echo whatever you send me 


Reverse Bot 
rdill reverse whatever you send me 


Waiting Bot 
I'll wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





ChatWindow 


Wi Chat - Echo Bot 
l'Il echo whatever you n 
send me 





图 11-1 ”聊天 应 用 的 顶层 组 件 
下 面 是 组 件 的 代码 。 


code/rxjs/chat/app/ts/app.ts 


GComponent ( f 
selector: 'chat-app', 
template: ^ 
«div» 

«nav-bar»«/nav-bar» 

«div classz"container"» 
«chat-threads»«/chat-threads» 
«chat-window»«/chat-window» 

«/div» 

«/div» 

}) 

class ChatApp { 
constructor(private messagesService: MessagesService, 

private threadsService: ThreadsService, 
private userService: UserService) { 

ChatExampleData.init(messagesService, threadsService, userService); 


j 
} 





@NgModule({ 
declarations: [ 
ChatApp, 
ChatNavBar, 
ChatThreads, 
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ChatThread, 
ChatWindow, 
ChatMessage, 
utillInjectables 


], 

imports: [ 
BrowserModule, 
FormsModule 


l, 
bootstrap: [ ChatApp ], 
providers: [ servicesInjectables ] 


}) 
export class ChatAppModule {} 


platformBrowserDynamic().bootstrapModule(ChatAppModule); 


注意 constructor ， 在 这 个 构造 酚 数 中 我 们 要 注入 三 个 服务 : MessagesService 、 
ThreadsService 和 UserService。 我 们 使 用 这 些 服务 来 初始 化 示例 数据 。 


如 果 你 对 示例 数据 感 兴趣 的 话 ， 可 以 在 code/rxjs/chat/app/ts/ChatExampleData.ts 
中 找到 它 。 
11.2 ChatThreads 组 件 
接 下 来 ， 我 们 在 ChatThreads 组 件 中 构建 会 话 列表 。 


Echo Bot * 
l'il echo whatever you send me 
Reverse Bot 
- l'Il reverse whatever you send me 
Waiting Bot 
l'il wait however many seconds you send 
to me before responding. Try sending '3' 
Lady Capulet 
So shall you feel the loss, but not the 
friend which you weep for. 
图 11-2 ”按时 间 排 序 的 会 话 列表 
A. ve — 
selector 非 常 直观 ， 我 们 要 匹配 chat-threads 元 素 。 





code/rxjs/chat/app/ts/components/ChatThreads.ts 


GComponent( { 
selector: 'chat-threads', 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 


11.2 ChatThreads 组 件 255 





11.2.1. ChatThreads 控制 器 
下 面 看 看 组 件 的 控制 器 ChatThreads 类 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


export class ChatThreads { 
threads: Observable«any»; 


constructor(private threadsService: ThreadsService) { 
this.threads - threadsService.orderedThreads; 


j 
} 


我 们 在 这 里 注入 了 ThreadsService ， 然 后 保存 了 orderedThreads 的 引用 。 





11.2.2 ChatThreads BS template 
最 后 ， 我 们 来 看 一 下 template 及 其 配置 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 





GComponent ( f 
selector: 'chat-threads', 
changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 
«!-- conversations --» 
«div class="row"> 
«div classz"conversation-wrap"» 


«chat-thread 
xngFor-"let thread of threads | async" 
[thread]-"thread"» 

«/chat-thread» 





«/div» 
«/div» 


























这 里 需要 注意 的 是 , 使 用 async 管 道 的 ngFor 指 令 .ChangeDetectionStrategy 和 ChatThread 
组 件 。 

ChatThread 组 件 (在 标记 中 匹配 chat-thread ) 将 展现 聊天 会 话 的 视图 。 我 们 稍 后 就 会 来 定 
义 它 。 

ngFor 遍 历 threads 属 性 并 把 值 通过 输入 属性 [thread] 传 给 chatThread 组 件 。 但 你 可 能 注意 
到 xngFor 中 出 现 了 新 东西 : async 管 道 。 

async 是 通过 AsyncPipe 实 现 的 ， 它 可 以 让 我 们 在 视图 "HEURES yobservables async 的 
强大 之 处 在 于 可 以 让 我 们 像 使 用 同步 集合 一 样 来 使 用 异步 可 观察 对 象 。 这 个 特性 极其 方便 并 且 
非常 棒 。 








ene 























图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


256 第 11 章 使 用 可 观察 对 象 的 数据 架构 ， 第 2 部 分 : 视图 组 件 











在 这 个 组 件 中 , 我 们 指定 了 一 个 特定 的 changeDetection。Angular 提 供 一 个 灵活 高 效 的 变更 
探测 系统 。 它 的 好 处 之 一 就 是 如 果 一 个 组 件 拥有 不 变 的 或 者 可 观察 的 绑 定 , 那么 我 们 可 以 向 变更 
探测 系统 发 送 提示 ， 让 应 用 高 效 地 运行 。 

在 这 个 例子 中 , Angular 不 再 观察 Thread 数 组 的 变化 ; 取而代之 的 是 订阅 可 观察 对 象 threads 
的 变化 ， 并 且 在 一 个 新 的 事件 发 出 后 触发 更 新 。 


下 面 是 完整 的 chatThreads 组 件 。 




















code/rxjs/chat/app/ts/components/ChatThreads.ts 


GComponent( f 
selector: 'chat-threads', 
changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 
«1l-- conversations --» 
«div class="row"> 
«div class-z"conversation-wrap"» 


«chat-thread 
xngFor-"let thread of threads | async" 
[thread]-"thread"» 

«/chat-thread» 


«/div» 
«/div» 
}) 
export class ChatThreads { 
threads: Observable«any»; 


constructor(private threadsService: ThreadsService) { 
this.threads - threadsService.orderedThreads; 


} 
} 


11.3 ”单个 ChatThread 组 件 
下 面 来 看 一 下 chatThread 组 件 ， 它 用 来 展示 单个 会 话 。 我 们 先 从 ecomponent 开始。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


GComponent( f 
inputs: ['thread'], 
selector: 'chat-thread', 
template: ^ 
«div class-"media conversation"» 
«div class-"pull-left"» 
«img class-"media-object avatar" 
src-"[[thread.avatarSrc]]"» 
«/div» 
«div class-"media-body"» 
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«h5 class-"media-heading contact-name"»[Í[thread.name]] 
«span x«ngIf-z"selected"»&bull;«/span» 


«/h5» 

«small class-"message-preview"»([thread.lastMessage.text]]«/small» 
«/div» 
«a (click)2"clicked($event)" class-"div-link"»Select«/a» 


«/div» 


}) 
稍 后 再 回来 看 template ， 我 们 先 来 看 看 组 件 定义 的 控制 器 。 


11.3.1 ChatThread 控制 器 和 ngOnInit 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


export class ChatThread implements OnInit { 
thread: Thread; 
selected: boolean - false; 


constructor(private threadsService: ThreadsService) { 


} 


ngOnInit(): void { 
this.threadsService.currentThread 
.subscribe( (currentThread: Thread) => { 
this.selected = currentThread && 
this.thread 8& 
(currentThread.id --- this.thread.id); 


5; 
} 


clicked(event: any): void { 
this.threadsService.setCurrentThread(this.thread); 
event.preventDefault(); 


j 
} 


Mg pou M rus : OnIn 让 。Angular 组 件 可 以 声明 它们 监听 了 某 些 生命 周期 事 
件 。 第 14 章 会 进一步 讨论 生命 周期 事件 。 

在 这 个 例子 中 , 因为 我 们 已 经 声明 实现 了 onInit, 所 以 当 组 件 第 一 次 检查 变化 后 就 会 调用 组 
件 中 的 ngonInit 方 法 。 

使 用 ngonInit 的 一 个 关键 原因 在 于 输入 属性 thread 在 constructor 中 是 获取 不 到 的 。 

在 上 面 可 以 看 到 ， 我们 在 ngOnInit 中 订阅 了 threadsService .currentThread . 如 果 
currentThread 匹 配 组 件 中 的 thread 属 性 ， 那 么 就 把 selected 属 性 设置 为 true。( 如 果 不 匹 配 ， 
就 把 selected 属 性 设置 为 false。) 


我 们 还 设置 了 一 个 事件 处 理 器 clicked， 用 来 处 理 选 择 当 前 会 话 的 事件 。 在 template 中 人 参 
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见 11.3.2 节 )， 我 们 会 把 会 话 视 图 上 的 点 击 和 clicked() 绑 定 。 如 果 触 发 了 clicked() ， 就 告诉 
threadsService 要 把 组 件 的 Thread 设 置 成 当前 会 话 设置 。 








11.3.2 ChatThread HJ template 





下 面 是 template 的 代码 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


template: ^ 
«div class-"media conversation"» 
«div class-"pull-left"» 
«img class-"media-object avatar" 
src-"[[thread.avatarSrc]]"» 
«/div» 
«div class-"media-body"» 
«h5 class-"media-heading contact-name"»(Í[thread.name]] 
«span xngIf-"selected"»&bull;«/span» 
«/h5» 


«small class-"message-preview"»([thread.lastMessage.text]]«/small» 
«/div» 
«a (click)2"clicked($event)" class-"div-link"»Select«/a» 


«/div» 


注意 这 里 有 一 些 简 单 的 绑 定 ， 如 {{fthread.avatarSrc}} 、{{fthread.name}} 和 {{thread . 
lastMessage.text]], 

我 们 还 用 *ngIf 来 显示 符号 &bul1; ， 只 有 已 选择 的 会 话 才 会 显示 。 
后 绑 定 了 (click) 事 件 来 调用 clicked( ) 处 理 器 。 注 意 ,调用 clicked 时 传人 了 参数 $event , 
RR A ROREM SA 寺 殊 变量 ， 由 Angular 提 供 。 我 们 在 clicked 处 理 器 中 通过 调用 方法 
event .preventDefault(); 使 用 了 $event 变 量 。 这 可 以 确保 我 们 不 会 跳 转 至 其 他 页 面 。 





















































11.3.3 ChatThread 的 完整 代码 





下 面 是 完整 的 chatThread 组 件 。 


code/rxjs/chat/app/ts/components/ChatThreads.ts 


GComponent( { 
inputs: ['thread'], 
selector: 'chat-thread', 
template: ^ 
«div class-"media conversation"» 
«div class-"pull-left"» 
«img class-"media-object avatar" 
src-"[[thread.avatarSrc]]"» 
«/div» 
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«div classz"media-body"» 
«h5 class-"media-heading contact-name"»([([thread.name]] 
«span xngIf-z"selected"»&bull;«/span» 


«/h5» 
«small class-"message-preview"»[(thread.lastMessage.text]))«/small» 
«/div» 
«a (click)-"clicked($event)" class-"div-link"»Select«/a» 
«/div» 


}) 

export class ChatThread implements OnInit { 
thread: Thread; 
selected: boolean - false; 


constructor(private threadsService: ThreadsService) { 


j 


ngOnInit(): void { 
this.threadsService.currentThread 
.subscribe( (currentThread: Thread) => { 
this.selected = currentThread && 
this.thread && 
(currentThread.id --- this.thread.id); 
J); 
} 


clicked(event: any): void { 
this.threadsService.setCurrentThread(this.thread); 
event.preventDefault(); 


j 
} 


11.4 ChatWindow 组 件 


ChatWindow 是 此 应 用 中 最 复杂 的 组 件 ( 如 图 11-3 所 示 )。 我 们 一 步 一 步 来 完成 它 。 


V8 Chat - Reverse Bot 
l'Il reverse whatever you send me n 


Write your message here. ES 








图 11-3 ”聊天 窗口 
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首先 从 定义 6@Component 开始。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 


GComponent( f 
selector: 'chat-window', 
changeDetection: ChangeDetectionStrategy.OnPush, 


11.4.4 ChatWindow 组 件 类 属性 


Chatwindow 类 有 四 个 属性 。 





code/rxjs/chat/app/ts/components/ChatWindow.ts 


export class ChatWindow implements OnInit { 
messages: Observable«any»; 
currentThread: Thread; 
draftMessage: Message; 
currentUser: User; 


11-4 表 明了 每 一 个 属性 在 何 处 使 用 。 








currentThread |. Pr 
l'Il reverse whatever you send me n mes S ages 


currentUser 





|Write your message here... draftMessage 














图 11-4 聊天 窗口 的 属性 
我 们 会 在 constructor 中 注入 四 样 东 西 。 








code/rxjs/chat/app/ts/components/ChatWindow.ts 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService, 
private userService: UserService, 
private el: ElementRef) { 


} 


前 面 的 三 个 都 是 我 们 创建 的 服务 。 最 后 的 el 是 一 个 ElementRef 对 象 ， 可 以 获取 当前 的 宿主 
DOM 元 素 。 当 创建 和 接收 新 消息 时 ， 我 们 会 使 用 它 把 聊天 窗口 滚动 到 底部 。 
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请 记 住 : 通过 在 构造 函数 中 使 用 public messagesService: MessagesService 
í t H 





我 们 在 注入 MessagesService 的 同时 创建 了 一 个 实例 
中 通过 this.messagesService 来 使 用 


11.4.2 ChatWindow 的 ngOnInit 


量 可 以 在 类 
的 可 观察 对 象 创 建 订 阅 。 


: void ( 





我 们 会 把 这 个 组 件 的 初始 化 放 在 ngonInit 中 。 在 这 里 主要 要 做 的 是 , 对 于 可 以 改变 组 件 


code/rxjs/chat/app/ts/components/ChatWindow.ts 
ngOnInit(): 








this.messages - this.threadsService.currentThreadMessages 
this.draftMessage - new Message() 
* 


首先 ， 我 们 会 把 currentThreadMessages 保 存 到 messages 属 性 中 。 接 下 来 ， 创 建 一 
Message 实 例 作 为 draftMessage 属 性 的 默 ; 
当 发 送 一 条 新 消息 

















默认 值 。 
为 这 个 要 发 送 的 会 








个 空 的 
的 时 候 ， 需要 确保 这 个 Message 保 存 了 一 份 将 要 发 送 的 Thread 的 引用 。 
话 会 成 为 当前 会 话 ， 所 以 我 们 保存 了 当前 已 选 会 话 的 引用 。 

code/rxjs/chat/app/ts/components/ChatWindow.ts 

this.threadsService.currentThread.subscribe( 
(thread: Thread) => ( 

this.currentThread - thread 
F) 
我 们 还 希望 新 消息 





subscribe( 
(user: 


\ 是 由 当前 用 户 发 送 的 ， 所 以 对 currentUser 做 了 同样 的 事 。 
code/rxjs/chat/app/ts/components/ChatWindow.ts 
this.userService.currentUser 


User) => { 
this.currentUser = user 
F); 





11.4.3 ChatWindow 的 sendMessage 
既然 讨论 到 这 


: void { 
let m: 


了 ， 那 就 来 实现 sendMessage 方 法 ， 它 可 以 发 送 一 条 
code/rxjs/chat/app/ts/components/ChatWindow.ts 
sendMessage( ) 


新 消息 。 
Message = this.draftMessage 
m.author - this.currentUser; 
m.thread - this.currentThread 
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m.isRead = true; 
this.messagesService.addMessage(m); 
this.draftMessage - new Message(); 


j 
sendMessage 函数 先 获 取 dra ftMessage 并 用 组 件 属性 设置 了 author 和 thread 属 性 ,每 条 已 发 
送 的 信息 其 实 都 已 经 被 读 过 了 ( 因为 是 我 们 写 的 )， 所 以 将 其 标记 为 已 读 。 
注意 ， 我 们 没有 更 新 dra ftMessage 的 文本 。 这 是 因为 很 快 就 会 将 dra ftMessage 的 文本 值 绑 
定 到 视图 中 。 
当 dqraftMessage 属 性 更 新 后 ,我们 将 它 发 送 给 messagesService ,然后 创建 一 个 新 的 Message 
对 象 并 赋值 给 this.draftMessage。 这 样 做 是 为 了 确保 不 会 改变 已 发 送出 去 的 消息 。 












































du 














11.4.4 ChatWindow 的 onEnter 
在 视图 中 ， 我 们 希望 在 下 面 两 种 场景 发 送 消息 : 





(1) 用 户 点 击 Send 按 钮 ; 
(2) 用 户 敲 击 回 车 键 。 
我 们 定义 一 个 函数 来 处 理 这 两 种 事件 。 





code/rxjs/chat/app/ts/components/ChatWindow.ts 


onEnter(event: any): void { 
this.sendMessage(); 
event.preventDefault(); 


} 


11.4.5 ChatWindow 的 scrollToBottom 


当 发 送 或 者 收 到 一 条 新 消息 时 ， 我 们 想 深 动 到 聊天 窗口 底部 。 为 此 要 设置 宿主 元 素 的 
scrol 1Top 属 性 。 











code/rxjs/chat/app/ts/components/ChatWindow.ts 


scrollToBottom(): void { 
let scrollPane: any - this.el 
.nativeElement.querySelector('.msg-container-base'); 
scrollPane.scrollTop - scrollPane.scrollHeight; 


j 
现在 有 了 滚动 到 底部 的 函数 , 还 需要 确保 在 恰当 的 时 间 调 用 它 。 回 到 ngonInit 方 法 中 , 订阅 
currentThreadMessages 的 消息 集合 并 在 得 到 一 条 新 消息 的 时 候 滚 动 到 底部 。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 























this.messages 
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.Subscribe( 
(messages: Array«Message») -» { 
setTimeout(() => ( 
this.scrollToBottom(); 
; 
; 


o 为 什么 要 使 用 setTimeout? 
如 果 我 们 得 到 新 消息 时 立即 调用 scroll1ToBottom， 那 么 滚动 到 底部 的 动作 就 是 
在 新 消息 泻 染 完成 之 前 执行 的 。 使 用 setTimeout 可 以 告诉 JavaScript 我 们 要 在 当 
前 执行 队列 完成 后 再 运行 这 个 函数 。 该 函数 会 在 组 件 演 染 完成 之 后 执行 ， 这 正 
是 我 们 想 要 的 效果 。 


11.4.6 ChatWindow 的 template 
template 的 开头 部 分 看 起 来 应 该 很 眼熟 ， 我 们 定义 了 一 些 标记 和 面板 标题 。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 


GComponent ( f 

selector: 'chat-window', 

changeDetection: ChangeDetectionStrategy.OnPush, 

template: ^ 

«div classz"chat-window-container"» 
«div classz"chat-window"» 
«div classz"panel-container"» 
«div class="panel panel-default"» 


«div classz"panel-heading top-bar"» 
«div classz"panel-title-container"» 
«h3 class-"panel-title"» 
«span class="glyphicon glyphicon-comment"»«/span» 
Chat - [(currentThread.name]] 
«/h3» 
«/div» 
«div classz"panel-buttons-container"» 
«1-- you could put minimize or close buttons here --» 
«/div» 
«/div» 


接 下 来 显示 消息 列表 。 这 里 使 用 带 async 管 道 的 ngFor 指 令 来 遍历 消息 列表 。 我 们 很 快 就 会 
讲解 单个 的 chat-message 组 件 。 











code/rxjs/chat/app/ts/components/ChatWindow.ts 


«div classz"panel-body msg-container-base"» 
«chat-message 
xngFor-"let message of messages | async" 
[message]-"message"» 
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«/chat-message» 


«/div» 








最 后 是 消息 输入 框 和 各 个 结束 标签 。 





code/rxjs/chat/app/ts/components/ChatWindow.ts 


«div class-"panel-footer"» 
«div classz"input-group"» 


«input typez" 


text" 


classz"chat-input" 

placeholder-z"Write your message here..." 
(keydown.enter)-"onEnter($event)" 
[(ngModel)]s2"draftMessage.text" /> 


«span class=" 


input-group-btn"'» 


«button class-z"btn-chat" 


(click)=" 


onEnter($event)" 


»Send«/button» 


«/span» 
«/div» 
«/div» 


«/div» 
«/div» 
«/div» 
«/div» 




















消息 输入 框 是 视图 中 最 有 意思 的 部 分 ， 我 们 来 看 看 其 中 两 个 有 趣 的 属性 : (keydown.enter) 





和 [(ngModel)] 。 


11.4.7 “处 理 键盘 动作 

















Angular 提 供 了 一 种 简明 的 方式 来 处 理 键盘 动作 : 在 元 素 上 绑 定 事件 。 在 这 个 例子 中 ,我 们 
HBE J keydown .enter。 这 表示 如 果 用 户 按 下 回 车 键 , 就 会 调用 表达 式 里 的 函数 onEnter($event )。 








code/rxjs/chat/app/ts/components/ChatWindow.ts 


«input typez" 





text" 


classz"chat-input" 

placeholder-z"Write your message here..." 
(keydown.enter)-"onEnter($event)" 
[(ngModel)]2"draftMessage.text" /> 


11.4.8 使 用 ngModel 


如 前 所 述 ，Angular 并 没有 把 双向 绑 定 作为 一 般 模 式 。 然 而 ， 组 件 和 组 件 对 应 视图 之 间 的 双 
向 绑 定 是 非常 有 用 的 。 只 要 把 双向 绑 定 的 副作用 限制 在 组 件 之 中 , 那么 保持 一 个 组 件 属性 和 视图 





中 同步 还 是 非常 方便 的 。 
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在 这 个 例子 中 ， 我 们 在 输入 框 的 值 和 draftMessage.text 之 间 建 立 了 一 个 双向 绑 定 。 如 果 在 


输入 框 中 输入 文字 ，draftMessage .text 就 会 自动 设置 为 输入 的 文字 。 同 样 ， 如 果 在 代码 中 更 新 
draftMessage.text， 那 么 视图 中 输入 框 的 值 也 会 随 之 改变 。 











code/rxjs/chat/app/ts/components/ChatWindow.ts 
«input type="text" 
class-"chat-input" 
placeholder-"Write your message here..." 


(keydown.enter)-"onEnter($event)" 
[(ngModel)]2"draftMessage.text" /> 


11.4.9 Ai Send 按钮 
在 Send 按 钮 上 将 (click) 属 | 








puts 


生 绑 定 到 组 件 中 的 onEnter 函数。 
code/rxjs/chat/app/ts/components/ChatWindow.ts 


«span class-"input-group-btn"» 
«button class-z"btn-chat" 
(click)-2"onEnter($event)" 
»Send«/button» 
«/span» 


11.4.10 “完整 的 ChatWindow 组 件 

















下 面 是 Chatwindow 组 件 的 完整 代码 清单 。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 
GComponent ( f 
selector: 'chat-window', 


changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 





«div classz"chat-window-container"» 
«div class-z"chat-window"» 
«div classz"panel-container"» 
«div class="panel panel-default"» 


«div classz"panel-heading top-bar"» 
«div class-z"panel-title-container"» 
«h3 class-"panel-title"» 
«span class="glyphicon glyphicon-comment"»«/span» 
Chat - [(currentThread.name]] 
«/h3» 
«/div» 
«div classz"panel-buttons-container"» 


«1-- you could put minimize or close buttons here --» 
«/div» 


«/div» 
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«div class-"panel-body msg-container-base"» 
«chat-message 
xngFor-"let message of messages | async" 
[message]-"message"» 
«/chat-message» 
«/div» 


«div class-"panel-footer"» 
«div classz"input-group"» 
«input type="text" 
classz"chat-input" 
placeholder-z"Write your message here..." 
(keydown .enter)-"onEnter($event)" 
[(ngModel)]s"draftMessage.text" /> 
«span class-"input-group-btn"» 

«button classz"btn-chat" 
(click)z"onEnter($event)" 
»Send«/button» 

«/span» 
«/div» 
«/div» 


«/div» 
«/div» 
«/div» 
«/div» 


I» 
export class ChatWindow implements OnInit { 
messages: Observable«any»; 
currentThread: Thread; 
draftMessage: Message; 
currentUser: User; 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService, 
private userService: UserService, 
private el: ElementRef) { 


ngOnInit(): void { 
this.messages - this.threadsService.currentThreadMessages; 


this.draftMessage - new Message(); 


this.threadsService.currentThread.subscribe( 
(thread: Thread) => ( 
this.currentThread - thread; 


IDE 


this.userService.currentUser 
.subscribe( 
(user: User) => { 
this.currentUser - user; 
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IDE 


this.messages 
.subscribe( 
(messages: Array«Message») -» { 
setTimeout(() => ( 
this.scrollToBottom(); 

DF 

p 

} 


onEnter(event: any): void { 
this.sendMessage(); 
event.preventDefault(); 


} 


sendMessage(): void { 
let m: Message = this.draftMessage; 


m.author - this.currentUser; 
m.thread - this.currentThread; 
m.isRead - true; 


this.messagesService.addMessage(m); 
this.draftMessage - new Message(); 


j 


scrollToBottom(): void { 
let scrollPane: any - this.el 
.nativeElement.querySelector('.msg-container-base'); 
scrollPane.scrollTop - scrollPane.scrollHeight; 


j 





11.5 ChatMessage 组 件 ru 


每 条 消息 都 是 通过 ChatMessage 组 件 泻 染 的 ， 如 图 11-$ 所 示 。 
该 组 件 相对 简明 ， 其 主要 逻辑 是 根据 消息 是 否 由 当前 用 户 所 创建 来 泻 染 出 略 有 不 同 的 视图 。 
如 果 该 消息 不 是 当前 用 户 创建 的 ， 就 认为 消息 是 收 到 的 (incoming )。 


我 们 先 从 定义 ecCcomponent 开始。 






































code/rxjs/chat/app/ts/components/ChatWindow.ts 





GComponent ( f 
inputs: ['message'], 
selector: 'chat-message', 
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Vli Chat - Reverse Bot 
e" ChatMessage 
v 


(s n ChatMessage 
| Write your message here... ES 


图 11-5 ChatMessage 组 件 














11.5.1 RE incoming 属性 


记 住 ， 每 个 chatMessage 组 件 都 属于 一 条 Message 。 因 此 ， 要 在 ngonInit 方 法 里 订阅 
currentUser 流 并 根据 这 条 Message 是 否 由 当前 用 户 所 创建 来 设置 incoming。 











code/rxjs/chat/app/ts/components/ChatWindow.ts 


export class ChatMessage implements OnInit { 
message: Message; 
currentUser: User; 
incoming: boolean; 


constructor(private userService: UserService) ( 


} 


ngOnInit(): void { 
this.userService.currentUser 
.subscribe( 
(user: User) => { 
this.currentUser - user; 
if (this.message.author && user) { 
this.incoming - this.message.author.id !-- user.id; 


DP 


11.5.2 ChatMessage B template 
在 template 中 有 两 处 值得 注意 : 
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(1) FromNowPipe 管 道 


E 
B | 


先 来 看 看 它 的 代码 。 


code/rxjs/chat/app/ts/components/ChatWindow.ts 








(2) [ngC1ass] 


本 


GComponent ( f 
inputs: ['message'], 
selector: 'chat-message', 
template: ^ 
«div class-z"msg-container" 
[ngClass]-"['base-sent': !incoming, 'base-receive': incoming]"» 


«div class="avatar" 
*nglf-2"!incoming"» 
«img src-"[í(message.author.avatarSrc]]"» 
«/div» 


«div class-"messages" 

[ngClass]-"['msg-sent': !incoming, 'msg-receive': incoming]"» 

«p» ((message.text]]«/p» 

«p class-"time"»([[message.author.name]]) e [(message.sentAt | fromNow]]«/p» 
«/div» 


«div class-"avatar" 
*nglf-z"incoming"» 
«img src-"[í(message.author.avatarSrc]]"» 
«/div» 
«/div» 


p) 
FromNowPipe 是 一 个 管道 , 把 消息 的 发 送 时 间 转 换 为 像 “x 秒 前 ”这 样 对 用 户 友好 的 信息 。 如 am 
你 所 见 ， 我 们 要 这 样 用 它 : ((message.sentAt | fromNow]]. 











14 


e FromNowPipe 使 用 优秀 的 moment . js "类 库 。 如 果 你 想 学 习 如 何 创 建 自 定义 管道 ， 
可 以 阅读 FromNowPipe 的 源 代 码 : code/rxjs/chat/app/ts/util/FromNowPipe.ts.. 





我 们 也 在 视图 中 充分 利用 了 ngclass。 当 这 样 写 时 : 

[ngClass]-"('msg-sent': !incoming, 'msg-receive': incoming)" 
我 们 是 在 告诉 Angular， 如 果 incoming 为 真 就 使 用 msg-receive 类 ( 否则 使 用 msg-sent 类 )。 
借助 incoming 属 性 ， 我 们 就 能 以 不 同 的 形式 来 显示 收 到 和 发 出 的 消息 。 






































(D http://momentjs.com/ 
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11.5.3 ”完整 的 ChatMessage 代码 清 


下 面 是 完整 的 ChatMessage 组 件 。 





code/rxjs/chat/app/ts/components/ChatWindow.ts 


import { 
Component, 
OnInit, 
ElementRef, 
ChangeDetectionStrategy 
) from 'Gangular/core'; 
import { 
MessagesService, 
ThreadsService, 
UserService 
) from '../services/services'; 
import {Observable} from 'rxjs'; 
import (User, Thread, Message] from '../models'; 


GComponent( { 
inputs: ['message'], 
selector: 'chat-message', 
template: ^ 
«div class-"msg-container" 
[ngClass]-"['base-sent': !incoming, 'base-receive': incoming]"» 


«div class-"avatar" 
xngIf="!incoming"> 
<img src-"[(message.author.avatarSrc]]"» 
</div> 


<div class="messages" 
[ngClass]="{'msg-sent': !incoming, 'msg-receive': incoming}"> 
<p> {{message.text}}</p> 


«p class="time">{{message.author.name}} e {{message.sentAt | fromNow}}</p> 
</div> 


<div class="avatar" 
xngIf="incoming"> 
<img src-"[(message.author.avatarSrc]]"» 
</div> 
</div> 
I» 
export class ChatMessage implements OnInit { 
message: Message; 
currentUser: User; 
incoming: boolean; 


constructor(private userService: UserService) [f 


} 
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ngOnInit(): void { 
this.userService.currentUser 
.subscribe( 
(user: User) => { 
this.currentUser - user; 
if (this.message.author && user) { 
this.incoming - this.message.author.id !-- user.id; 


E 


GComponent ( f 

selector: 'chat-window', 

changeDetection: ChangeDetectionStrategy.OnPush, 

template: ^ 

«div classz"chat-window-container"» 
«div classz"chat-window"» 
«div classz"panel-container"» 
«div class="panel panel-default"» 


«div classz"panel-heading top-bar"» 
«div classz"panel-title-container"» 
«h3 class-"panel-title"» 
«span class="glyphicon glyphicon-comment"»«/span» 
Chat - [(currentThread.name]] 
«/h3» 
«/div» 
«div classz"panel-buttons-container"» 
«1-- you could put minimize or close buttons here -—» 
«/div» 
«/div» 


«div classz"panel-body msg-container-base"» 
«chat-message 
xngFor-"let message of messages | async" 
[message]-"message"» 
«/chat-message» 
«/div» 


«div class-"panel-footer"» 
«div classz"input-group"» 
«input type="text" 
class-"chat-input" 
placeholder-"Write your message here..." 
(keydown.enter)-"onEnter($event)" 
[(ngModel)]2"draftMessage.text" /> 
«span class-"input-group-btn"» 

«button classz"btn-chat" 
(click)z"onEnter($event)" 
»Send«/button» 

«/span» 
«/div» 
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«/div» 


«/div» 
«/div» 
«/div» 
«/div» 


I» 
export class ChatWindow implements OnInit { 
messages: Observable«any»; 
currentThread: Thread; 
draftMessage: Message; 
currentUser: User; 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService, 
private userService: UserService, 
private el: ElementRef) { 

j 


ngOnInit(): void { 
this.messages - this.threadsService.currentThreadMessages; 


this.draftMessage - new Message(); 


this.threadsService.currentThread.subscribe( 
(thread: Thread) => ( 
this.currentThread - thread; 


}); 


this.userService.currentUser 
.subscribe( 
(user: User) => { 
this.currentUser = user; 


P 


this.messages 
.subscribe( 
(messages: Array«Message») => { 
setTimeout(() => ( 
this.scrollToBottom(); 
1) 
JAS 
} 


onEnter(event: any): void { 
this.sendMessage(); 
event.preventDefault(); 


} 


sendMessage(): void { 
let m: Message = this.draftMessage; 
m.author - this.currentUser; 
m.thread - this.currentThread; 
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m.isRead = true; 
this.messagesService.addMessage(m); 
this.draftMessage - new Message(); 


j 
scrollToBottom(): void { 
let scrollPane: any - this.el 


.nativeElement.querySelector('.msg-container-base'); 
scrollPane.scrollTop - scrollPane.scrollHeight; 


j 


11.6 ChatNavBar 组 件 


我 们 要 讨论 的 最 后 一 个 组 件 是 chatNavBar 。 导 航 条 中 会 显示 当前 用 户 的 未 读 消 息 数 ， 如 图 
11-6 所 示 。 


HE Echa Rat e 





图 11-6 ChatNavBar 组 件 中 的 未 读数 


Qe 试验 未 读 消息 数量 最 好 的 办 法 是 使 用 等 待机 器 人 (Waiting Bot )。 如 何 你 还 没有 
试 过 ， 尝 试 发 消息 “3” 给 等 待机 器 人 ， 然 后 切换 到 其 他 聊天 窗口 。 等 待机 器 人 
会 等 3 秒 再 给 你 回复 消息 ， 这 样 你 就 会 看 到 未 读 消息 数量 的 增长 。 





11.6.1 ChatNavBar 的 eComponent 
首先 ， 我 们 定义 了 非常 简单 的 ecomponent 配 置 。 


code/rxjs/chat/app/ts/components/ChatNav Bar.ts 





GComponent ( f 
selector: 'nav-bar', 


11.6.2 ChatNavBar 控制 器 
需要 做 的 就 是 记录 unreadMessagesCount 属性 。 这 其 实 比 表面 看 上 去 











ChatNavBar 控 制 器 唯 
稍微 复杂 一 些 。 

最 简明 的 方式 就 是 监听 messagesService.messages ， 然 后 计算 属性 isRead 是 false 的 
Messages 数 量 总 和 。 对 于 当前 会 话 外 的 所 有 消息 ， 这 种 方法 可 以 正常 工作 。 然 而 ， 当 messages 


















































图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


274 第 11 章 使 用 可 观察 对 象 的 数据 架构 ， 第 2 部 分 : 视图 组 件 





流 发 出 新 值 时 ， 无 法 保证 当前 会 话 的 新 消息 被 标记 为 已 读 。 

最 安全 的 方式 就 合并 messages 流 和 currentThread 流 , 以 确保 不 会 把 任何 属于 当前 会 话 的 消 
息 算 入 总 数 。 

我 们 用 combineLatest 操 作 符 来 进行 实现 〈 本 章 前 面 也 使 用 过 它 )。 


code/rxjs/chat/app/ts/components/ChatNav Bar.ts 








export class ChatNavBar implements OnInit { 
unreadMessagesCount: number; 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService) { 


} 


ngOnInit(): void { 
this.messagesService.messages 


.combineLatest( 
this.threadsService.currentThread, 
(messages: Message[], currentThread: Thread) => 


[currentThread, messages] ) 


.subscribe(([currentThread, messages]: [Thread, Message[]]) => { 
this.unreadMessagesCount - 
—-.reduce( 
messages, 
(sum: number, m: Message) => ( 
let messageIsInCurrentThread: boolean = m.thread && 
currentThread && 
(currentThread.id --- m.thread.id); 
if (m && !m.isRead && !messageIsInCurrentThread) { 
sum = sum + 1; 
j 
return sum; 
) 
0); 
J) 
j 
j 


如 果 你 不 熟悉 TypeScript 的 话 ， 会 觉得 上 面 的 语法 有 些 不 太 容 易 理 解 。 我们 在 combineLatest 
回调 函数 中 返回 了 一 个 数组 ， 这 个 数组 包含 两 个 元 素 : currentThread 和 messages。 

然后 我 们 订阅 了 combineLatest 操 作 符 返 回 的 流 ， 在 函数 调用 中 解构 这 些 对 象 。 接 下 来 ， 我 
们 用 redquce 化 简 了 messages 人 集合， 对 所 有 未 读 并 且 不 属于 当前 会 话 的 消息 进行 计数 。 

















11.6.3 ChatNavBar 的 template 
在 视图 中 ， 唯 一 需要 做 的 事 就 是 显示 unreadMessagesCount 属 性 。 
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code/rxjs/chat/app/ts/components/ChatNavBar.ts 


GComponent ( f 
selector: 'nav-bar', 
template: ^ 
«nav class-"navbar navbar-default"» 
«div class-"container-fluid"» 
«div class-"navbar-header"» 
«a class-"navbar-brand" hrefz"https://ng-book.com/2"» 
«img src-"$(require('images/1ogos/ng-book-2-minibook.png')]"/» 
ng-book 2 
«/a» 
«/div» 
«p class-"navbar-text navbar-right"» 
«button class="btn btn-primary" type-z"button"» 


Messages «span class-"badge"»[(unreadMessagesCount]] «/span» 
«/button» 


«/p» 
«/div» 
«/nav» 


11.6.4 “完整 的 ChatNavBar 组 件 

















下 面 是 完整 的 ChatNavBar 组 件 代 码 清 单 。 


code/rxjs/chat/app/ts/components/ChatNavBar.ts 


import {Component, OnInit} from '@angular/core'; 

import {MessagesService, ThreadsService} from '../services/services'; 
import {Message, Thread} from '../models'; 

import x as _ from 'underscore'; 


@Component( f 
selector: 'nav-bar', 
template: ` 
«nav class="navbar navbar-default"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
«a class="navbar-brand" href="https ://ng-book .com/2"> 


<img src-"$(require('images/1ogos/ng-book-2-minibook.png')]"/» 
ng-book 2 


</a> 
</div> 
<p class="navbar-text navbar-right"> 
<button class="btn btn-primary" type="button"> 


Messages «span class="badge">{{unreadMessagesCount}}</span> 
</button> 


</p> 
</div> 
</nav> 


D) 
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export class ChatNavBar implements OnInit { 
unreadMessagesCount: number; 


constructor(private messagesService: MessagesService, 
private threadsService: ThreadsService) { 
j 


ngOnInit(): void { 
this.messagesService.messages 
.combineLatest( 
this.threadsService.currentThread, 


(messages: Message[], currentThread: Thread) -» 
[currentThread, messages] ) 


.subscribe(([currentThread, messages]: 
this.unreadMessagesCount - 
—.reduce( 
messages, 
(sum: number, m: Message) => ( 
let messagelIsInCurrentThread: boolean = m.thread && 
currentThread && 
(currentThread.id --- m.thread.id); 


[Thread, Message[]]) => ( 


if (m && !m.isRead && !messageIsInCurrentThread) { 
sum = sum + 1; 
j 


return sum; 


), 
135 


11.7 i£ 











好 了 ,把 











它们 全 部 放 在 一 起 ， 就 是 一 个 完整 的 聊天 应 用 了 如 图 11-7 所 示 )! 


查看 文件 code/redux/angular2-redux-chat/app/ts/ChatExampleData.ts, 你 会 发 现 我 们 已 经 写 好 了 
少量 可 以 跟 你 聊天 的 机 器 人 。 下 面 是 从 反 转 机 器 人 中 截取 的 一 些 代码 : 




















let rev: User = new User("Reverse Bot", require("images/avatars/female-avatar-4.png")); 
let tRev: Thread - new Thread("tRev", rev.name, rev.avatarSrc); 


code/rxjs/chat/app/ts/ChatExampleData.ts 


messagesService.messagesForThreadUser(tRev, rev) 
.forEach( (message: Message): void => { 
messagesService.addMessage( 
new Message({ 
author: rev 


, 


text: message.text.split('').reverse().join(''), 
thread: tRev 


D) 
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) 
33 
Q © © / [s anguar2-Chatwith JS x (5 | Blank | 
€ > Œ | localhost:8080 x »z 





ng-book2 


Echo Bot * 
l'Il echo whatever you 


Reverse Bot 
l'Il reverse whatever you send me 


Waiting Bot 
l'Il wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


Wi Chat - Echo Bot 
l'll echo whatever you n 
send me 








图 11-7 ”完成 后 的 聊天 应 用 


如 你 所 见 , 我 们 已 经 通过 messagesForThreadUser 方 法 为 反 转 机 器 人 订阅 了 消息 。 你 可 以 试 
着 写 几 个 自己 的 机 句 人 。 


11.8 ”更 进一步 | 


改进 这 个 聊天 应 用 的 一 些 方 法 包括 加 强 RxJS 的 使 用 并 连接 到 一 个 真实 的 API。 发 起 API 请 求 
的 方法 我 们 已 经 在 第 6 章 中 讨论 过 了 。 眼 下 请 尽情 享受 你 的 聊天 应 用 吧 ! 

















图 灵 社 区 会 员 xiaochao12312312ff(499290328(9 qq.com) 专 享 尊重 版 权 


基于 TypeScript 的 Redux 
简介 











本 章 及 下 一 章 将 着 眼 于 一 种 叫 作 Redux 的 数据 架构 。 本 章 将 讨论 Redux 背 后 的 理念 , 建造 一 
个 自己 的 迷你 版 Redux 并 把 它 连接 到 Angular。 在 下 一 章 中 ， 我 们 将 使 用 Redux 构 建 一 个 更 大 的 
应 用 o 


到 目前 为 止 ,我们 的 大 多 数 项 目 都 在 通过 一 种 相当 直接 的 方式 管理 状态 :从 服务 中 获取 数据 ， 
然后 在 组 件 中 泻 染 数 据 。 在 组 件 树 中 ， 值 是 沿 着 自 上 而 下 的 方向 传递 的 。 


对 于 比较 小 的 应 用 来 说 , 这 种 管理 方式 已 经 足够 了 ; 但 随 着 应 用 的 成 长 ， 让 多 个 组 件 来 管理 
状态 的 不 同 部 分 将 变 得 难以 处 理 。 比 如 ， 通 过 组 件 树 向 下 传递 所 有 值 的 方式 有 如 下 缺点 。 


O 属性 的 间接 传递 : 为 了 让 任何 组 件 都 可 以 获取 到 应 用 的 状态 ， 我 们 不 得 不 通过 inputs 属 
性 向 下 传递 值 。 这 意味 着 我 们 会 借助 很 多 中 间 组 件 来 传递 状态 ， 而 这 些 中 间 组 件 既 不 使 
用 也 不 关心 传递 的 状态 。 

O 重 构 不 灵活 ;传递 inputs 属 性 时 要 贯穿 整个 组 件 树 ， 从 而 导致 父子 组 件 之 间 产 生 耦 合 ， 
而 这 些 灶 合 通常 都 是 不 必要 的 。 这 样 ， 试 图 把 一 个 子 组 件 放 入 组 件 树 的 其 他 层级 中 会 变 
得 非常 困难 ， 因 为 我 们 必须 修改 所 有 新 的 父 级 组 件 来 传递 状态 。 

O 状态 村 和 DOM 桂 不 匹配 ; 状态 的 “形状 ”往往 和 视图 /组 件 层级 的 “形状 ”不 匹配 。 当 我 
们 需要 引用 组 件 树 一 个 较 远 分 支 中 的 数据 时 ， 通 过 组 件 树 的 属性 来 传递 所 有 值 就 会 使 我 
们 陷入 困境 。 

O 应 用 中 到 处 都 是 状态 ， 如 果 通 过 组 件 来 管理 状态 ， 就 很 难 获取 应 用 整体 状态 的 快照 。 因 
此 很 难 知道 哪个 组 件 “拥有 ”一 条 特定 的 数据 以 及 哪些 组 件 关心 该 数据 的 变化 。 

把 数据 从 组 件 中 提取 出 来 并 放 到 服务 中 会 有 很 大 的 帮助 至 少 ,如 果 服务 是 数据 的 “拥有 者 ”, 
那么 对 于 把 数据 放 在 哪里 ,我 们 就 有 更 清晰 的 概念 。 但 这 也 带 来 了 一 个 新 问题 : 关于 “让 服务 拥 
有 数据 ”的 最 佳 实践 又 是 什么 呢 ? 有 什么 可 以 遵循 的 模式 吗 ?当然 有 ! 

本 章 会 讨论 一 种 叫 作 Redux 的 数据 架构 模式 ， 其 设计 初衷 就 是 要 解决 这 些 问题 。 我 们 将 自己 
实现 一 个 Redux， 它 会 把 所 有 的 状态 都 存储 在 一 个 地 方 。 这 种 “把 所 有 应 用 状态 都 存在 同一 个 地 
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方 ”的 想法 乍 听 起 来 可 能 有 点 疯狂 ， 但 最 终 会 给 你 惊喜 。 


12.1 Redux 


如 果 你 还 没 听 说 过 Redux, 可 以 到 其 官网 http:/redux.js.org/ 查 看 相关 内 容 。 网 络 应 用 的 数据 架 
构 一 直 在 进化 , 搭建 数据 架构 的 传统 方式 已 经 不 能 很 好 地 适应 大 型 网 络 应 用 。 因 为 功能 强大 且 易 
于 理解 ，Redux 如 今 非常 流行 。 
数据 架构 是 一 个 复杂 的 话题 ， 而 Redux 的 最 大 优点 可 能 是 它 的 简单 性 。 如 果 把 Redux 剥 离 得 
只 剩 核心 代码 ， 其 代码 行 数 将 不 到 100 行 。 

通过 把 Redux 用 作 应 用 的 骨架 ， 我 们 可 以 构建 出 更 容易 理解 的 富 网 络 应 用 。 首 先 ， 我 们 来 看 
看 如 何 编写 一 个 迷你 版 Redux， 稍 后 再 把 这 些 概念 应 用 到 一 个 更 大 的 应 用 程序 中 ， 以 更 好 地 理解 
Redux 的 工作 模式 。 












































Qs 有 人 尝试 使 用 Redux 或 新 建 一 个 受 Redux 启 发 的 、 能 与 Angular 协 同 工 作 的 系统 。 
以 下 是 两 个 著名 的 例子 : 

口 ngrx/store” » 
O angular2-redux^ 
ngrx 是 一 个 受 Redux 启 发 的 架构 ， 也 是 可 观察 对 象 的 重度 使 用 者 。angular2- 
redux 则 依赖 于 Redux 并 添加 了 一 些 Angular 的 辅助 类 (依赖 注入 、 可 观察 对 象 包 
* )。 
这 里 不 会 使 用 它们 。 为 了 在 不 引入 新 依赖 的 前 提 下 更 好 地 展示 概念 ， 我 们 将 直 
接 使 用 Redux。 当然 , 在 你 编写 自己 的 应 用 时 , 这 两 个 类 库 可 能 会 对 你 有 所 帮助 。 


Redux: 核心 概念 
Redux 的 核心 概念 有 : 


口 应 用 的 所 有 数据 都 放 在 一 个 叫 作 state 的 数据 结构 之 中 ， 而 state 存 放 在 store 中 ; 

Q 应 用 从 store 中 读 取 state; 

O store 永 远 不 会 被 直接 修改 ; 

口 action 描 述 发 生 了 什么 ， 由 用 户 交 互 ( 和 其 他 代码 ) 触发 ; 

口 通过 调用 一 个 叫 作 reducer 的 函数 来 结合 旧 的 state 和 action 会 创建 出 新 的 state ( 如 图 12-1 所 
ZR Jo 
































(D https:;//github.com/ngrx/store 
 https://github.com/InfomediaLtd/angular2-redux 
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| —— : 











Reducer() 





旧 的 state 








图 12-1 Redux 的 内 核 
如 果 以 上 几 点 还 不 够 清楚 的 话 ， 也 不 用 担心 。 本 章 的 其 余部 分 会 把 这 些 概念 应 用 到 实践 中 。 


12.2 Redux 核心 概念 


12.2.1 reducer 是 什么 

我 们 先 来 讨论 reducer ( 归 集 器 )。reducer 的 概念 是 : 接收 旧 的 state 和 action 并 返回 新 的 state。 

reducer 必 须 是 一 个 纯 函 数 "。 也 就 是 说 : 

(1) 它 不 能 直接 修改 当前 的 state; 

(2) 它 不 会 使 用 参数 之 外 的 任何 数据 。 

换 句 话说 ,一 个 纯 函 数 在 参数 不 变 的 情况 下 ， 总 是 会 返回 同一 个 值 ; 而 且 纯 函数 不 会 调用 任 
何 会 对 外 界 产生 影响 的 函数 。 比 如 ， 没 有 数据 库 调 用 ,没有 HTTP 请 求 ， 也 不 会 改变 外 部 的 数据 
结构 。 


reducer 应 始终 把 当前 state 当 作 只 读 的 。reducer 不 应 该 改变 state, 而 是 应 该 返回 一 个 新 的 state。 
(通常 ， 新 的 state 会 从 复制 原 有 state 开 始 ， 但 我 们 不 应 该 自己 动手 复制 它 。) 


下 面 来 定义 我 们 的 第 一 个 reducer。 记 住 ，reducer 涉 及 以 下 三 点 。 
(1) Action: 定义 要 做 什么 (能 带 可 选 参 数 )。 

(2) state: 存储 应 用 中 的 所 有 数据 。 

(3) Reducer : 接收 state 和 Action 并 返回 一 个 新 的 state。 














(D https://en.wikipedia.org/wiki/Pure function 
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12.2.2 ”定义 Action 和 Reducer 的 接口 


因为 我 们 使 用 TypeScript 是 为 了 确保 全 程 都 是 带 类 型 的 ,所 以 先 为 Action 和 Reducer 设 计 一 套 
接口 。 

1. Action 接 口 

Action 接 口 如 下 所 示 。 


code/redux/angular2-redux-chat/minimal/tutorial/01-identity-reducer.ts 




















interface Action { 
type: string; 
payload?: any; 

j 


注意 Action 有 了 两 个 字段 : 
(1) type 
(2) payload 


性 > Ah dD 


type 是 一 个 标识 识字 符 串 ， 用 来 描述 action 的 类 型 ， 比 如 INCREMENT 或 ADD_USER。payload 可 以 
是 任意 类 型 的 对 象 。 bayloadq? 中 的 ?表示 这 文 个 字段 是 可 选 的 。 


2. Reducer 接 口 
Reducer 接 口 如 下 所 示 。 


code/redux/angular2-redux-chat/minimal/tutorial/01-identity-reducer.ts 











oz 






































interface Reducer«T» { 
(state: T, action: Action): T 


] 
Reducer 使 用 了 TypeScript 中 一 种 名 叫 泛 型 的 特性 。 在 这 个 例子 中 , T 就 是 state 的 类 型 。 注 意 ， 
这 里 我 们 要 表达 的 是 : 有 效 的 Reducer 就 是 一 个 函数 ， 它 接收 state (类 型 为 7 ) 和 action 并 返回 
一 个 新 的 state ( 类 型 也 是 T )。 









































12.2.3 创建 第 一 个 Reducer 


最 简单 的 reducer 返 回 state 本 身 。( 可 以 把 它 叫 作 identity reducer, ， 因 为 它 在 state 上 应 用 了 
“identity 函 数 ”"。 这 也 是 所 有 reducer 的 默认 情况 ， 我 们 很 快 就 会 看 到 。) 


code/redux/angular2-redux-chat/minimal/tutorial/01-identity-reducer.ts 








let reducer: Reducer«number» = (state: number, action: Action) => { 
return state; 


IE 





(D https://en.wikipedia.org/wiki/Identity function 
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注意 ， 这 个 Reducer 通 过 语法 Reducerxcnumbery 把 泛 型 中 的 类 型 固定 为 number 。 我 们 很 快 就 
定义 一 些 比 数字 更 复杂 i 


我 们 还 没有 使 用 Action ， 但 已 经 可 以 试用 这 个 Reducer 了 。 








运行 本 节 的 示例 
你 可 以 在 code/redux 文 件 夹 中 找到 本 章 的 代码 。 如 果 示 例 是 可 运行 的 ， 那么 你 就 
会 在 代码 块 上 方 看 到 文件 名 。 
在 本 节 中 ， 这 些 例子 是 在 浏览 器 之 外 通过 node.js 来 运行 的 。 因 为 这 些 例子 中 用 
的 是 TypeScript， 所 以 你 应 该 使 用 命令 行 工具 ts-node ( 而 不 是 直接 使 用 node ) 
来 运行 它们 。 
可 以 运行 下 面 的 命令 来 安装 ts-node: 
npm install -g ts-node 

4t, #7 VÀ 4E. code/redux/angular2-redux-chat 目录 下 运行 npm install, ， 然 后 调 
用 ./node_modules/. node --noProject, 


比如 ， 要 运行 上 面 的 例子 ， 你 需要 输入 下 列 命令 (不 要 输入 $ 符 ): 


$ cd code/redux/angular2-redux-chat/minimal/tutorial 
$ ../../node modules/.bin/ts-node --noProject O1-identity-reducer.ts 


在 我 们 告诉 你 把 运行 环境 切换 到 浏览 器 之 前 ， 本 章 其 余 的 代码 也 都 用 同样 的 步 
又 运行 。 


12.2.4 ”运行 第 一 个 Reducer 
把 所 有 代码 整合 起 来 并 运行 这 个 reducer。 


code/redux/angular2-redux-chat/minimal/tutorial/01-identity-reducer.ts 





interface Action { 
type: string; 
payload?: any; 

j 


interface Reducer«T» { 


(state: T, action: Action): T 


j 

let reducer: Reducer«number» = (state: number, action: Action) -» { 
return state; 

}; 

console.log( reducer(0, null) ); // -> 0 


运行 下 列 命令 : 
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$ cd code/redux/angular2-redux-chat/minimal/tutorial 
$ ../../node modules/.bin/ts-node --noProject O01-identity-reducer.ts 
[7] 


用 这 上段 代码 作为 示例 似乎 有 点 傻 ， 但 它 教 给 了 我 们 reducer 的 第 一 条 原则 : 
默认 情况 下 ，reducer 返 回 state 本 身 。 


在 这 个 例子 中 , 我 们 传人 了 一 个 值 为 数字 @ 的 state 和 一 个 值 为 nul1 的 action。reducer 返 回 的 结 
果 是 值 为 数字 @ 的 state。 


但 是 我 们 还 要 做 一 些 更 有 趣 的 





























dini 


aH state o 


12.2.5 ”使 用 action 调整 计数 器 

我 们 最 终 的 state 会 远 比 一 个 数字 复杂 得 多 。 我 们 会 把 应 用 中 的 所 有 数据 都 保存 在 state 中 ， 
这 就 需要 为 最 终 的 state 设 计 一 种 更 好 的 数据 结构 。 

不 过 ， 目 前 使 用 一 个 数字 作为 state 可 以 让 我 们 专注 于 其 他 问题 。 因 此 我 们 先 沿用 这 种 做 法 ， 
state 仅 仅 是 一 个 用 来 存储 计数 器 的 数字 。 


假设 我 们 希望 改变 state 的 数值 。 记 住 ， 我 们 不 会 在 Redux 中 修改 state。 取 而 代 之 的 是 创建 
action， 用 来 告诉 reducer 如 何 生成 一 个 新 的 state。 


证 我 们 创建 一 个 Action 来 改变 计数 器 。 要 记 住 ，Action 唯 一 的 必 选 属 ! 
以 像 这 样 来 定义 第 一 个 action : 

let incrementAction: Action = { type: 'INCREMENT' } 

我 们 还 应 该 创建 第 二 个 action， 它 负责 通知 reducer 让 计数 器 变 小 : 

let decrementAction: Action = { type: 'DECREMENT' } 


现在 有 了 这 些 action ， 我 们 来 试 试 在 reducer 中 使 用 它们 。 


code/redux/angular2-redux-chat/minimal/tutorial/02-adjusting-reducer.ts 

















anf 


生 就 是 type 。 我 们 可 


























let reducer: Reducer«number» = (state: number, action: Action) => { 


if (action.type --- 'INCREMENT') { 
return state + 1; 

j 

if (action.type --- 'DECREMENT') { 
return state - 1; 

j 

return state; 


Hh 
现在 可 以 试用 完整 的 reducer 了 。 
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code/redux/angular2-redux-chat/minimal/tutorial/02-adjusting-reducer.ts 
let incrementAction: Action = { type: 'INCREMENT' Jj; 


console.log( reducer(0, incrementAction )); // -> 1 
console.log( reducer(1, incrementAction )); // -» 2 


let decrementAction: Action = { type: 'DECREMENT' }; 


console.log( reducer(100, decrementAction )); // -> 99 


漂亮 ! 现在 会 根据 传 给 reducer 的 action 来 决定 返回 的 新 state 的 值 。 





12.2.6 reducer B switch 
我 们 通常 把 reducer 的 主体 代码 换 成 switch 语 句 ， 而 不 是 一 大 堆 if。 


code/redux/angular2-redux-chat/minimal/tutorial/03-adjusting-reducer-switch.ts 























let reducer: Reducer«number» = (state: number, action: Action) -» { 
switch (action.type) { 
case 'INCREMENT ' : 
return state + 1; 
case 'DECREMENT': 
return state - 1; 
default: 
return state; // «-- dont forget! 
j 


let incrementAction: Action = { type: 'INCREMENT' }; 
console.log(reducer(0, incrementAction)); // -> 1 
console.log(reducer(1, incrementAction)); // -> 2 


let decrementAction: Action = { type: 'DECREMENT' }; 
console.log(reducer(100, decrementAction)); // -» 99 


// any other action just returns the input state 
let unknownAction: Action = { type: 'UNKNOWN' }; 
console.log(reducer(100, unknownAction)); // -» 100 


注意 switch 语 名 的 default 分 支 要 返回 state 本 身 。 当 传人 一 个 未 知 的 action 时 ， 这 将 确保 程 
序 不 会 报错 而 且 我 们 能 得 到 原始 的 state 值 。 
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Qs H: 等 一 下 ! 难道 要 把 应 用 中 所 有 的 state 都 放 在 一 个 庞大 的 switch 语 句 中 吗 ? 
答 : 既是 又 不 是 。 

如 果 这 是 你 第 一 次 接触 Redux 的 reducer， 那么 “对 应 用 中 state 的 所 有 更 改 都 是 一 
个 庞大 switch 语 句 的 结果 ”可 能 会 让 你 感到 奇怪 。 你 应 该 知道 下 面 两 点 。 
(1) 在 一 个 地 方 集中 管理 state 的 变化 对 于 维护 程序 有 莫大 的 帮助 ， 具 体 来 说 是 因 
为 当 把 所 有 状态 都 集中 在 一 起 时 就 很 容易 查 出 哪里 发 生 了 变化 。( 此 外 ,你 可 以 
轻松 地 定位 state 的 变化 是 哪个 action 的 结果 ， 因 为 你 可 以 把 action 的 type 属 性 作 
为 关键 字 在 代码 中 进行 搜索 。) 
(2) 你 可 以 (而 且 经 常会 ) 将 reduer 分 解 成 若干 sub-reducer ( 子 reducer )， 它 们 各 
自负 责 管理 state 树 中 的 一 个 不 同 分 支 。 我 们 稍 后 会 进行 讨论 。 


12.2.7 action 的 “参数 ” 

















在 上 个 例子 中 ， 我 们 的 action 只 包含 一 个 type 属 性 ， 用 来 告诉 reducer 是 递增 还 是 递减 这 个 





State。 








然而 , 应 用 的 变化 通常 是 无 法 通过 单一 的 值 来 描述 清楚 的 ， 而 是 需要 一 些 参 数 来 描述 这 种 变 




















化 。 这 就 是 在 Action 里 有 pay1loaq 字 段 的 原因 Te 





在 这 个 计数 器 示例 中 ， 如 果 我 们 想 要 让 计数 器 增加 9。 一 种 做 法 是 发 送 9 次 INCREMENT action, 





但 这 样 做 效率 太 低 ， 尤 其 是 在 想 增加 一 个 较 大 数值 的 时 候 ， 如 9000。 








替代 方案 是 增加 一 个 PLUS action。 它 用 payload 参 数 来 发 送 一 个 数字 ， 这 个 数字 表示 计数 器 


要 增加 的 值 。 定 义 这 个 action 很 简单 : 


let plusSevenAction = {type: 'PLUS', payload: 7 ); 
接 下 来 ， 要 支持 这 个 action， 就 要 在 reducer 里 添加 一 个 新 的 case 分 支 来 处 理 PLUS action; 


code/redux/angular2-redux-chat/minimal/tutorial/04-plus-action.ts 


let reducer: Reducer«number» = (state: number, action: Action) => { 
switch (action.type) { 
case 'INCREMENT': 
return state + 1; 
case 'DECREMENT': 
return state - 1; 
case 'PLUS': 
return state + action.payload; 
default: 
return state; 
j 
F 
PLUS 分 支 会 把 action.payload 中 的 任何 数字 累加 到 state 上 。 下 面 来 试 试看 。 
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code/redux/angular2-redux-chat/minimal/tutorial/04-plus-action.ts 

console.log( reducer(3, { type: 'PLUS', payload: 7]) ); // -> 40 

console.log( reducer(3, { type: 'PLUS', payload: 9000]) ); // -> 9003 

console.log( reducer(3, ( type: 'PLUS', payload: -2]) ); // -> 4 

我 们 在 第 一 行 接收 的 state 是 3， 然 后 加 上 7， 得 到 的 结果 是 16。 漂 亮 ! 不 过 ， 请 注意 当 我 们 传 
递 state 的 时 候 ， 它 并 没有 真 的 发 生变 化 。 也 就 是 说 ， 我 们 没有 保存 reducer 变 化 产生 的 结果 ， 不 
能 在 之 后 的 action 中 复 用 它 。 














12.3 保存 state 
这 些 reducer 都 是 纯 函 数 ， 不 会 改变 外 部 环境 。 问 题 在 于 ， 应 用 中 的 一 切 都 在 不 断 变化 。 特 别 
是 在 state 变 化 后 ， 我 们 必须 在 某 个 地 方 保留 这 个 新 的 state。 


在 Redux 中 ，state 是 保存 在 store 里 的 。store 负 责 运 行 reducer 然 后 保存 新 的 state。 我 们 来 看 一 个 
最 简单 的 store。 












































code/redux/angular2-redux-chat/minimal/tutorial/05-minimal-store.ts 


class Store«T» { 
private | state: T; 


constructor( 
private reducer: Reducer«T», 
initialState: T 

rst 
this. state - initialState; 


} 


getState(): T ( 
return this. state; 


} 


dispatch(action: Action): void { 
this. state = this.reducer(this. state, action); 
j 
j 


注意 Store 是 泛 型 的 ， 我 们 指定 state 的 类 型 为 泛 型 7T， 并 用 私有 变量 _state 来 存储 state。 


Store 还 应 该 有 一 个 Reducer ， 它 同样 是 泛 型 的 ， 泛 型 的 类 型 是 T。 这 是 因为 每 个 store 都 和 一 
个 特定 的 reducer 紧 密 相 关 。 我 们 用 私有 变量 reducer 来 存储 这 个 Reducer 。 


























A 在 Redux 中 ， 每 个 应 用 通常 只 有 一 个 store 和 一 个 顶层 reducer。 


让 我 们 来 仔细 看 看 State 中 的 每 个 方法 : 
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口 在 构造 函数 中 把 _state 变 量 设置 为 初始 的 state; 
口 getState() 直 接 返 回 当前 的 _state 变 量 ; 
口 dispatch 接 收 一 个 action 并 把 它 传 给 reducer， 


注意 qispatch 方 法 不 返回 任何 值 。 它 只 更 新 store 中 的 state ( 结果 返回 之 后 )。 
条 重要 原则 : 分 发 (dispatch ) action 是 一 种 “触发 并 忘记 ”的 策略 。 
state， 所 以 它 也 不 返回 新 的 state。 


当 我 们 分 发 action 的 时 候 ， 会 发 送 一 个 关于 发 生 了 什么 的 通知 。 如 果 想 
态 ， 就 必须 检查 store 中 的 state。 
































回 值 来 更 新 _state 变 量 的 值 。 
这 是 Redux 中 的 


分 发 action 并 不 直接 操作 


然后 用 返 














号 要 了 解 系统 的 当前 状 





12.3.1 使 用 store 
我 们 来 试 试 store。 


code/redux/angular2-redux-chat/minimal/tutorial/05-minimal-store.ts 


// create a new store 


let store - new Store«number»(reducer, 0); 


conso 


store. 


conso 


store. 


conso 


store. 


conso 


先 创建 一 个 新 的 Store 对 象 并 保存 在 store 变 量 中 。 我们 可 以 使 用 这 


e.log(store. 
dispatch({ 
e.log(store. 
dispatch({ 

e.log(store 





dispatch({ 











e.log 


JF HAT actions 


state 初 始 值 为 0 ， 然 后 进行 两 次 INCREMENT , 


type: 
getState()); 


type: 
.getState()); 


type: 
store.getState()); 


getState()); 





// -»0 


' INCREMENT ' 


5; 


// ->1 


' INCREMENT ' 


5; 


// => 2 


' DECREMENT ' 


5; 


// ->1 


12.3.2. f FH subscribe 进行 通知 


Store 记 录 着 发 生 的 变化 ， 这 很 不 错 


Dico ua Ti RA 3 


要 做 到 这 一 








个 变量 来 获取 当前 的 state 


一 次 DECREMENT ， 最 终 的 state 值 是 1 。 


; 但 是 在 上 个 示例 中 ,我 们 必须 用 store .getstate( ) 询 





新 的 action 分 发 后 能 立刻 让 我 们 知道 就 好 了 ， 这 样 我 们 就 能 作出 响应 了 。 





点 ， 可 以 实现 观察 者 模式 (observer pattern )。 也 就 是 说 ， 我 们 会 


来 订阅 所 有 的 变化 。 
我 们 希望 它 这 样 工作 : 


(1) 我 们 用 subscribe 注 册 一 个 


图 灵 社区 会 员 
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注册 一 个 回调 函数 用 
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(2) 当 dispatch 被 调用 时 ,我们 遍历 所 有 的 监听 器 并 逐个 调用 它们 ， 它 们 会 负责 通知 大 家 这 
个 state 发 生 了 变化 。 


1. 注册 监听 器 
监听 回调 函数 是 没有 参数 的 函数 。 我 们 来 定义 一 个 接口 ， 以 便于 描述 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 

















interface ListenerCallback { 
(): void; 

j 
订阅 一 个 监听 器 后 ， 我 们 可 能 还 需要 取消 订阅 ， 因 此 也 为 取消 订阅 函数 定义 个 接口 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 





interface UnsubscribeCallback { 
(): void; 
j 
这 上 段 代 码 没 什么 内 容 , 它 只 是 另 一 个 没有 参数 的 函数 , 也 没有 返回 值 。 但 定义 这 些 类 型 能 让 
我 们 的 代码 更 容易 阅读 。 


store 还 要 保存 一 个 ListenerCallbacks 的 列表 。 我 们 把 这 个 列表 加 到 Store 中 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


class Store«T» { 
private | state: T; 


1 


private _listeners: ListenerCallback[] = []; 
接着 我 们 就 可 以 用 subscribe 函 数 把 监听 器 添加 到 _1isteners 列 表 中 了 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


subscribe(listener: ListenerCallback): UnsubscribeCallback { 
this. listeners .push(listener); 
return () => ( // returns an "unsubscribe" function 
this. listeners = this. listeners.filter(1l => 1 !-- listener); 
}; 
} 
subscribe 接 收 一 个 ListenerCallback 参 数 ( 也 就 是 一 个 没有 参数 、 没 有 返回 值 的 函数 ) 并 
返回 JnsubscribeCallback (方法 签名 同上 )。 添 加 监听 器 很 简单 : 只 要 用 push 方 法 把 它 追 加 到 
_listeners 数 组 中 就 可 以 了 。 


它 的 返回 值 是 一 个 函数 。 这 个 函数 会 修改 _listeners 列 表 , 把 刚 加 上 的 1istener 过 滤 掉 , 也 
就 是 说 , 它 返回 UnsubscribeCcallback 函 数 , 调用 此 函数 就 会 把 刚 加 上 的 listener 从 列表 中 移 除 。 


2. 通知 监听 器 
每 当 state 发 生变 化 时 , 我 们 都 要 调用 这 些 监听 函数 。 也 就 是 说 , 无 论 是 分 发 了 一 个 新 的 action 
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5i 


还 是 state 发 生变 化 ， 我 们 都 要 调用 所 有 监听 器 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


dispatch(action: Action): void { 
this. state - this.reducer(this. state, action); 
this. listeners.forEach((listener: ListenerCallback) -» listener()); 


] 
3. 完整 的 store 


稍 后 我 们 会 亲自 尝试 这 个 store， 不 过 现在 先 看 看 Store 最 新 的 完整 代码 清单 。 





code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


class Store«T» { 
private state: T; 
private listeners: ListenerCallback[] - []; 


constructor( 
private reducer: Reducer«T», 
initialState: T 
)ít 
this. state - initialState; 
j 


getState(): T ( 
return this. state; 


j 


dispatch(action: Action): void { 
this. state - this.reducer(this. state, action); 
this. listeners.forEach((listener: ListenerCallback) -» listener()); 


j 


subscribe(listener: ListenerCallback): UnsubscribeCallback { 
this. listeners.push(listener); 
return () => ( // returns an "unsubscribe" function 
this. listeners = this. listeners.filter(l => 1 !-- listener); 


hr 





j 
} 


4. 试用 subscribe 
现在 可 以 订阅 这 个 store 的 变化 了 ， 试 试看 。 


code/redux/angular2-redux-chat/minimal/tutorial/06-store-w-subscribe.ts 


let store - new Store«number»(reducer, 0); 
console.log(store.getState()); // -> 0 


// subscribe 
let unsubscribe = store.subscribe(() => ( 
console.log('subscribed: ', store.getState()) 
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5 


store.dispatch(( type: 'INCREMENT' }); // -> subscribed: 1 
store.dispatch(( type: 'INCREMENT' }); // -> subscribed: 2 


unsubscribe(); 
store.dispatch(( type: 'DECREMENT' 3); // (nothing logged) 


// decrement happened, even though we weren't listening for it 
console.log(store.getState()); // -> 1 


我 们 订阅 了 store 并 在 其 回调 函数 中 输出 日 志 subscribed: 以 及 store 的 当前 state。 





e 注意 ， 监 听 函 数 并 没有 把 当前 state 作 为 参数 传 进来 。 尽 管 这 个 选择 看 起 来 有 点 
奇怪 , 但 这 是 因为 还 有 另 一 些 细节 需要 权衡 。 MI ed 变更 通知 和 当前 state 
分 开会 更 利于 思考 。 在 此 就 不 再 深入 探 完 了 ， 要 了 解 更 多 信息 ， 请 阅读 
https://github.com/reactjs/redux/1ssues/1707. https://github.com/react]s/redux/issues/ 
15137fehttps://github.com/reactjs/redux/issues/303 。 





我 们 保存 了 unsubscribe 回 调 函 数 。 接 下 来 要 注意 ， 在 调用 unsubscribe() 之 后 就 不 会 再 输 
出 日 志 了 。 我 们 仍然 可 以 分 发 action， 但 却 看 不 到 它 的 结果 了 ， 除 非 直 接 向 store 询 问 。 





-a nn 你 可 能 会 想到 ， 其 实 也 可 以 用 RxJS 实 现 自己 的 订 
阅 监 听 器 。 你 可 以 重 写 Store， 用 可 观察 对 象 代替 我 们 自行 实现 的 订阅 机 制 。 
英雄 所 见 略 同 。 事 实 上 ,我 们 已 经 替 你 做 好 了 ,你 可 以 在 文件 code/redux/angular2- 
redux-chat/minimal/tutorial/06b-rx-store.ts 中 找到 示例 代码 。 

如 果 你 愿意 使 用 RxJS 作 为 应 用 的 数据 骨架 ， 那 么 用 RxJS 实 现 Store 就 是 一 种 有 
趣 而 强大 的 模式 。 

我 们 在 这 里 并 没有 过 多 使 用 可 观察 对 象 ,主要 是 因为 我 们 想 讨论 Redux 本 身 以 及 
如 何 使 用 一 个 单独 的 state 树 来 思考 数据 架构 。Redux 本 身 已 经 强大 到 不 必 借助 可 
观察 对 象 就 可 以 在 应 用 中 使 用 了 。 

一 旦 你 领悟 了 如 何 使 用 “正统 ”Redux， 那 么 再 加 入 可 观察 对 象 就 一 点 也 不 难 了 
( 前提 是 你 已 经 理解 了 RxJS )。 我 们 先 暂 且 使 用 “正统 ” Redux; 本 章 结 尾 处 会 
给 出 一 些 指 引 ， 告 诉 你 如 何 使 用 基于 可 观察 对 象 的 Redux 包 装 器 。 


12.3.8 Redux 核心 


上 面 这 个 store 就 是 Redux 的 基本 内 核 。reducer 接 收 当前 state 和 action 并 返回 一 个 新 的 state， 这 
个 state 会 保存 在 store 中 。 


想 要 构建 一 个 用 于 生产 环境 的 大 型 网 络 应 用 , 我 们 显然 还 要 添加 更 多 。 但 是 , 我 们 稍 后 涉及 
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的 所 有 新 概念 都 将 以 这 样 一 个 简单 的 概念 为 基础 :state 是 不 可 改变 的 ， 是 集中 存储 的 。 如 果 掌 握 
了 之 前 提 到 的 这 些 概 念 ， 也 可 以 发 明 一 些 能 用 在 高 级 Redxu 应 用 中 的 模式 ( 以 及 类 库 )。 


在 Redux 的 日 常 使 用 过 程 中 ， 还 有 许多 我 们 未 曾 涉及 的 方面 。 比 如 ， 我 们 需要 知道 : 


Q 如 何在 state 中 精心 处 理 更 复杂 的 数据 结构 ; 

O 当 state 发 生变 化 时 ， 如 何不 必 轮 询 state 就 得 到 通知 (使 用 订阅 ); 

口 如 何 拦截 分 发 进行 调试 (middleware ); 

a 如 何 计算 派生 值 〈 使 用 选择 器 ); 

口 如 何 把 一 个 大 型 reducer 分 解 成 许多 可 维护 的 小 型 reducer ( 并 重新 组 合 ); 
口 如 何 处 理 异步 数据 。 


我 们 将 在 本 章 的 剩余 部 分 和 下 一 章 中 逐一 解释 这 些 问 题 并 讲解 常用 的 模式 。 


我 们 首先 介绍 如 何在 state 中 处 理 更 复杂 的 数据 结构 。 为 此 ,我 们 需要 一 个 比 计数 如 更 有 意思 
的 示例 。 那 就 构建 一 个 聊天 应 用 吧 ， 用 户 可 以 用 它 向 彼此 发 送 消息 。 
































12.4 ”消息 应 用 
在 这 个 聊天 应 用 中 ( 以 及 所 有 Redux 应 用 中 ) 数据 模型 有 三 个 主要 部 分 : 


(1) state 





(2) action 


(3) reducer 


12.4.4 消息 应 用 的 state 
计数 器 应 用 中 的 state 只 是 一 个 数字 ， 而 在 这 个 消息 应 用 中 ，state 是 一 个 对 象 。 


这 个 state 对 象 只 有 一 个 属性 messages。messages 是 一 个 字符 串 数 组 , 每 个 字符 串 表示 应 用 中 cam 
的 一 条 消息 。 例 如 : 


// an example ^state^ value 
{ 
messages: [ 
'here is message one', 
'here is message two' 
] 
j 


我 们 可 以 这 样 定义 该 应 用 中 的 state 类 型 。 
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code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


interface AppState { 
messages: string[]; 


} 


12.4. ”消息 应 用 的 action 


这 个 应 用 将 处 理 两 个 action: ADD_MESSAGE 和 DELETE_MESSAGE 。 














action 对 象 ADD_MESSAGE 永 远 都 有 一 个 属性 message ， 这 个 属性 表示 添加 到 state 中 的 消息 。 
action 对 象 ADD_MESSAGE 的 模型 如 下 : 


{ 
type: 'ADD_MESSAGE', 
message: 'Whatever message we want here 


] 

action 对 象 DELETE_MESSAGE 会 从 state 中 删除 一 条 指定 的 消息 。 这 里 的 问题 在 于 ， 我 们 要 指出 
想 删 除 的 是 哪 条 消息 。 

如 果 消 息 的 数据 结构 是 对 象 的 话 ， 可 以 在 每 条 消息 创建 的 时 候 赋 予 它 一 个 1g 属性。 然而 , 为 
了 让 这 个 示例 尽 可 能 简单 ， 消 息 只 是 单纯 的 字符 串 ， 因 此 我 们 只 能 用 另 一 种 方式 来 删除 消息 了 。 
目前 最 简单 的 方式 就 是 直接 使 用 消息 数组 里 的 索引 ( 可 以 看 作 事 实 性 的 ID )。 

明白 这 一 点 之 后 ，action 对 象 DELETE_MESSAGE 的 模型 如 下 : 





























{ 
type: 'DELETE MESSAGE', 
index: 2 // «- or whatever index is appropriate 
j 
我 们 可 以 用 TypeScript 的 语法 interface ... extends 来 定义 这 些 action 的 类 型 。 


code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


interface AddMessageAction extends Action { 
message: string; 


} 


interface DeleteMessageAction extends Action { 
index: number; 


} 
这 样 AddMessageAction 就 能 指定 一 条 消息 了 , 而 DeleteMessageAction 也 可 以 指定 一 个 索引 。 


12.4.8 ”消息 应 用 的 reducer 


记 住 reducer 需 要 处 理 两 个 action: ADD_MESSAGE 和 DELETE_MESSAGE 。 下 面 来 分 别 讨论 它们 : 
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1. 处 理 ADD_MESSAGE 
首先 针对 action.type 使 用 switch 语 句 并 处 理 ADD_MESSAGE 分 支 。 





code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


let reducer: Reducer«AppState» - 
(state: AppState, action: Action): AppState => { 
switch (action.type) { 
case 'ADD MESSAGE': 
return { 
messages: state.messages.concat( 
(«AddMessageAction»action).message 
), 
IS 


e TypeScript 的 对 象 本 身 已 经 有 类 型 了 ， 为 什么 还 要 添加 一 个 type 字 段 呢 ? 

要 处 理 这 种 “多 态 分 发 ”( polymorphic dispatch )， 有 很 多 方式 可 供 选择 。 想 区 
分 不 同类 型 的 action 并 在 同一 个 reducer 里 处 理 它们 ， 一 种 非常 简明 的 方式 是 在 
type 字 段 里 存 一 个 字符 串 ( 这 里 type 的 意思 是 “action 的 类 型 ” )。 从 某 种 程度 上 
说 ， 你 确实 不 必 为 每 个 action 创 建 一 个 新 的 接口 。 
不 过 ， 用 反射 来 实现 对 具体 类 型 的 Switch 会 更 令 人 满意 。 虽 然 类 型 守卫 "开启 了 
这 种 可 能 性 ， 但 当前 版 本 的 TypeScript 还 做 不 到 这 一 点 。 
从 广义 上 来 说 ， 类 型 只 是 一 个 编译 阶段 的 概念 。 代 码 编译 成 JavaScript 后 ， 会 丢 
失 一 些 类 型 的 元 数据 。 
当然 ， 如 果 你 觉得 对 type 字 段 进行 switch 很 麻烦 ， 希 望 直 接 使 用 语言 特性 来 实 
现 的 话 ， 也 可 以 使 用 “装饰 器 反射 元 数据 ”技术 ”。 目 前 ， 用 一 个 简单 的 type 
字段 就 足够 了 。 


2. 添加 一 项 而 不 改变 原 有 数据 


当 处 理 ADD_MESSACE 时 ， 我 们 需要 把 给 定 的 消息 添加 到 state 中 。 像 所 有 的 reducer 一 样 ， 我 们 
需要 返回 一 个 新 的 state。 要 记 住 ，reducer 必 须 是 纯 函 数 并 且 不 会 改变 旧 的 state。 


下 面 的 代码 有 什么 问题 ? 


case 'ADD. MESSAGE ' : 
state.messages.push( action.message ); 
return { messages: messages }; 


vp AMENS 


问题 在 于 这 段 代 码 改 变 了 state.messages 数 组 , 也 就 是 改变 了 旧 的 state。 正确 的 做 法 是 创建 
一 个 state.messages 数 组 的 副本 并 把 新 消息 添加 到 这 个 副本 中 。 

















(D https://basarat.gitbooks.io/typescript/content/docs/types/typeGuard.html 
@ http://blog.wolksoftware.com/decorators-metadata-reflection-in-typescript-from-novice-to-expert-part-4 
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code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


case 'ADD MESSAGE': 
return { 
messages: state.messages.concat( 
(«AddMessageAction»action).message 
), 


Qe 语法 CAddMessageAction>action 会 把 action 转 换 成 更 具体 的 类 型 。 也 就 是 说 ， 

reducer 接 收 的 是 更 通用 的 类 型 Action ， 它 并 没有 messsage 字 段 。 如 果 这 里 我 们 
没有 进行 转换 ， 那 么 编译 器 就 会 报告 说 Action 没 有 messsage 字 段 。 

但 是 ， 我 们 确实 知道 有 一 个 ADD_MESSAGE action, ， 所 以 就 把 它 转化 成 一 个 

AddMessageAction。 使 用 圆 括号 来 确保 编译 器 知道 我 们 要 转化 的 是 action 而 不 


是 action.message。 


记 住 ,reducer 必 须 返 回 一 个 新 的 AppState。 当 我 们 从 reducer 返 回 一 个 对 象 的 时 候 , 它 必须 匹 
配 AppState 的 格式 。 在 这 个 例子 中 ， 我 们 只 需要 一 个 关键 字段 messages; 但 在 更 复杂 的 state 中 ， 
就 要 考虑 更 多 字段 了 。 


3. 删除 一 项 而 不 改变 原 有 数据 


记 住 ， 当 处 理 DELETE_MESSAGE action 时 ， 我 们 传人 数组 中 消息 的 索引 作为 代理 ID ( 另 一 种 常 
见 的 做 法 是 传人 一 个 真实 条 目的 ID )。 另 外 ， 因 为 我 们 不 想 改变 旧 的 messages 数 组 ， 所 以 需要 小 
心 处 理 。 














code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 


case 'DELETE MESSAGE': 
let idx - («DeleteMessageAction»action).index; 
return { 
messages: [ 
...State.messages.slice(0, idx), 
...State.messages.slice(idx + 1, state.messages.length) 


] 


这 里 使 用 了 两 次 slice 操 作 符 。 首 先 获取 要 删除 条 目 之 前 的 所 有 条 目 ， 然 后 连接 上 其 后 的 所 
有 条 日 o 
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Qe 有 4 种 不 改变 原 有 数据 的 常见 操作 : 
O 往 数 组 中 添加 一 项 ; 
口 从 数组 中 移 除 一 项 
DO 添加 或 修改 对 象 中 的 键 ; 
口 从 对 象 中 移 除 键 。 
前 两 个 (数组 的 ) 操作 我 们 已 经 介绍 过 了 。 接 下 来 我 们 将 讨论 更 多 关于 对 象 的 
操作 。 目 前 需要 知道 的 是 一 种 使 用 Object.assign 的 常用 方法 ， 如 下 所 示 : 


Object.assign({}, oldObject, newObject) 
// «------- 《一 一 一 一 一 一 一 一 一 一 一 一 一 





你 可 以 认为 Object.assign 方 法 是 从 右 至 左 地 合并 对 象 。newObject 合 并 到 
oldObject， 再 合并 到 {}。 这 样 ，o1dObject 的 所 有 字段 都 会 保留 ， 除非 字段 在 
newOb ject 中 也 存在 。 无 论 是 ol1d0bject 还 是 newOb ject 都 不 会 被 改变 。 

当然 ， 进 行 这 些 处 理 时 要 小 心 谨慎 ， 因 为 很 容易 犯错 。 这 也 是 很 多 人 使 用 
Immutable.js 的 一 个 原因 ，Immutable.js 是 一 组 有 助 于 加 强 不 变性 的 数据 结构 。 


12.4.4 ”试用 action 
现在 来 尝试 运行 action。 
code/redux/angular2-redux-chat/minimal/tutorial/07-messages-reducer.ts 
let store = new Store«AppState»(reducer, { messages: [] }); 


console.log(store.getState()); // -> ( messages: [] } 


store.dispatch(Í 

type: 'ADD MESSAGE', 

message: 'Would you say the fringe was made of silk?' 
} as AddMessageAction); 





store.dispatch(Í 

type: 'ADD MESSAGE', 

message: 'Wouldnt have no other kind but silk' 
) as AddMessageAction); 


store.dispatch(Í 

type: 'ADD MESSAGE', 

message: 'Has it really got a team of snow white horses?' 
} as AddMessageAction); 


console.log(store.getState()) 
// = 





(D https:;//facebook.github.io/immutable-js/ 
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// ( messages: 

// [ 'Would you say the fringe was made of silk?', 

// 'Wouldnt have no other kind but silk', 

// 'Has it really got a team of snow white horses?' ] } 


我 们 先 创 建 了 一 个 新 的 store ， 然 后 调用 store.getState() ， 从 而 看 到 一 个 空 的 messages 
数组 。 


接 下 来 ， 我 们 往 store 中 添加 三 条 消息 "。 对 于 每 条 消息 ， 我 们 都 把 type 设 为 ADD_MESSAGE 并 
把 每 个 对 象 转换 成 AddMessageAction。 


最 后 ， 我 们 把 新 的 state 打 印 出 来 ， 就 能 看 到 messages 数 组 包含 了 所 有 这 三 条 消息 。 

这 三 个 dispatch 语 句 都 不 够 优雅 ， 原 因 有 以 下 两 点 。 

(1) 每 次 都 需要 手动 指定 type 字 符 串 。 我 们 也 可 以 改 用 常量 ， 但 是 如 果 什 么 都 不 用 做 就 更 
好 了 。 

(2) 需要 手动 转换 成 AddMessageAction。 


我 们 应 该 创建 一 个 函数 来 创建 这 些 对 象 ， 而 不 是 直接 创建 。 编 写 函 数 来 创建 action 的 思想 在 
Redux 中 很 常见 ， 因 此 这 种 模式 有 个 名 字 : action creator。 







































































12.4.5 action creator 
我 们 要 创建 一 个 函数 来 创建 ADD_MESSAGCE action， 而 不 是 直接 使 用 对 象 。 


code/redux/angular2-redux-chat/minimal/tutorial/08-action-creators.ts 











class MessageActions { 
static addMessage(message: string): AddMessageAction { 
return { 
type: 'ADD MESSAGE', 
message: message 


un 


static deleteMessage(index: number): DeleteMessageAction [f 
return { 
type: 'DELETE MESSAGE', 
index: index 
}; 
} 
} 


这 里 创建 了 一 个 类 , 它 有 两 个 静态 方法 addMessage 和 deleteMessage ,分 别 返 回 AddMessage- 
Action 和 DeleteMessageAction。 





(D https://en.wikipedia.org/wiki/The Surrey with the Fringe on Top 
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你 不 一 定 要 用 静态 方法 作为 action creator， 也 可 以 使 用 普通 的 函数 ,命名 空间 中 
的 函数 ， 甚 至 是 一 个 对 象 的 实例 方法 等 。 关 键 是 要 用 统一 的 方式 来 组 织 它们 ， 
让 它们 便于 使 用 。 


现在 我 们 就 改 用 新 的 action creator 了 。 





code/redux/angular2-redux-chat/minimal/tutorial/08-action-creators.ts 
let store = new Store«AppState»(reducer, { messages: [] }); 


console.log(store.getState()); // -> ( messages: [] } 


store.dispatch( 
MessageActions.addMessage( Would you say the fringe was made of silk?')); 


store.dispatch( 
MessageActions.addMessage( 'Wouldnt have no other kind but silk')); 


store.dispatch( 
MessageActions.addMessage('Has it really got a team of snow white horses?')); 





console.log(store.getState()); 


// -> 

// ( messages: 

// [ 'Would you say the fringe was made of silk?', 

Y 'Wouldnt have no other kind but silk', 

// 'Has it really got a team of snow white horses?' ] } 
这 样 感觉 好 多 了 ! 


它 还 有 一 个 额外 的 好 处 : 如 果 最 终 决定 要 改变 消息 的 格式 , 我 们 不 用 更 新 任何 一 处 dispatch 
语句 。 比 如 ， 假 设 我 们 要 给 每 条 消息 增加 创建 时 间 ， 就 可 以 在 addMessage 方 法 中 添加 一 个 
created_at 字 段 ， 那 么 现在 所 有 的 AddMessageActions 都 会 有 created_at 字 上 段 : 





class MessageActions { 
static addMessage(message: string): AddMessageAction { 
return { 
type: 'ADD MESSAGE', 
message: message, 
// something like this 
created at: new Date() 
hs 
j 
J£ ves 





12.4.6 ”使 用 真正 的 Redux 


现在 我 们 已 经 写 好 了 自己 的 迷你 版 Redux。 你 可 能 会 问 :“ 要 想 使 用 真正 的 Redux 还 需要 做 什 
么 ? ” 谢 天 谢 地 ， 没 有 多 少 要 做 的 。 让 我 们 更 新 一 下 代码 ， 现 在 就 改 用 真正 的 Redux。 
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如 果 你 还 没准 备 好 ， 那 就 需要 在 code/redux/angular2-redux-chat/minimal/tutorial 
目录 下 运行 命令 npm install。 





首先 要 做 的 是 从 redux 包 中 导入 Action 、Reducer 和 Store。 同 时 还 导入 了 一 个 辅助 函数 


createStore,; 


code/redux/angular2-redux-chat/minimal/tutorial/09-real-redux.ts 


import { 
Action, 
Reducer, 
Store, 
createStore 

) from 'redux'; 


接 下 来 ， 让 reducer 创 建 初始 的 state， 而 不 是 在 创建 store 的 时 候 指定 。 这 里 ， 我 们 让 reducer 的 
默认 参数 来 做 这 件 事 。 采 用 这 种 方式 ， 如 果 没 有 state 传 人 ( 例如 在 初始 化 阶段 中 reducer 被 首次 调 
H) 就 会 使 用 初始 的 state。 


code/redux/angular2-redux-chat/minimal/tutorial/09-real-redux.ts 


let initialState: AppState = { messages: [] }; 


















































let reducer: Reducer«AppState» - 
(state: AppState = initialState, action: Action) => { 


reducer 的 其 余部 分 都 不 用 动 ， 干 得 漂亮 ! 
最 后 要 做 的 是 使 用 Redux 的 辅助 函数 createStore 来 创建 store。 


























code/redux/angular2-redux-chat/minimal/tutorial/09-real-redux.ts 
let store: Store«AppState» - createStore«AppState»(reducer); 


之 后 一 切 正 常 ! 


code/redux/angular2-redux-chat/minimal/tutorial/09-real-redux.ts 
let store: Store«AppState» - createStore«AppState»(reducer); 
console.log(store.getState()); // -> { messages: [] } 


store.dispatch( 
MessageActions.addMessage('Would you say the fringe was made of silk?')); 


store.dispatch( 
MessageActions.addMessage( 'Wouldnt have no other kind but silk')); 


store.dispatch( 
MessageActions.addMessage('Has it really got a team of snow white horses?')); 





console.log(store.getState()) 
// => 
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// ( messages: 


// [ 'Would you say the fringe was made of silk?', 
// 'Wouldnt have no other kind but silk', 
// 'Has it really got a team of snow white horses?' ] } 











现在 我 们 只 是 单纯 地 使 用 Redux 来 解决 问题 ， 下 一 步 还 要 把 Redux 和 我 们 的 网 络 应 用 联系 起 
来 。 开 始 行动 吧 。 


12.5 Æ Angular 中 使 用 Redux 

在 上 一 节 中 ,我 们 学 习 了 Redux 的 核心 并 展示 了 如 何在 Redux 中 创建 reducer 以 及 使 用 store 管 理 
数据 。 现 在 我 们 要 更 进一步 ， 把 Redux 和 Angular 组 件 结 合 起 来 。 

我 们 将 在 本 节 中 创建 一 个 最 小 化 的 Angular 应 用 。 该 应 用 只 有 一 个 计数 器 ， 可 以 通过 按钮 来 
增加 或 减少 计数 ( 如 图 12-2 所 示 )。 





Counter 
Custom Store 


The counter value is: 3 


图 12-2 ”计数 器 应 用 








这 种 小 应 用 可 以 让 我 们 专注 于 Redux 和 Angular 之 间 的 集成 点 。 在 下 一 节 中 , 我 们 将 进一步 讨 
论 更 大 的 应 用 。 目 前 ， 我 们 先 来 看 看 如 何 构建 这 个 计数 器 应 用 ! 





e 我 们 没有 在 Redux 和 Angular 之 间 使 用 任何 辅助 类 库 ， 而 是 直接 集成 它们 。 其 实 
有 很 多 开源 类 库 可 以 简化 这 一 过 程 ， 参 见 12.13 节 。 
不 过 ， 一 旦 你 理解 了 其 背后 的 原理 ， 使 用 这 些 类 库 也 会 容易 得 多 。 这 里 我 们 所 
做 的 一 切 都 是 为 了 让 你 更 好 地 理解 Redux 背 后 的 原理 。 


12.6 ”规划 应 用 
你 应 该 还 记得 ， 规 划 Redux 应 用 的 三 个 步骤 是 : 


(1) 定义 应 用 中 央 state 的 数据 结构 ; 
(2) 定义 用 来 改变 state 的 action; 
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(3) 定义 一 个 reducer， 用 于 接收 旧 的 state 和 一 个 action 并 返回 新 的 state。 


对 于 这 个 应 用 来 说 , 我 们 只 是 要 增加 或 者 减少 计数 。 这 个 功能 已 经 在 上 一 节 实 现 了 ,所 以 你 
会 对 本 节 的 action 、store 和 reducer 感 到 非常 熟悉 。 


我 们 要 做 的 另外 一 件 事 就 是 ， 在 编写 Angular 应 用 时 决定 在 哪里 创建 组 件 。 在 这 个 应 用 中 ， 
有 一 个 顶层 组 件 CounterApp， 它 包含 一 个 CounterComponent 组 件 。CounterComponent 组 件 则 包 
含 屏幕 截图 所 示 的 那个 视图 。 

大 致 上 ， 我 们 要 做 以 下 几 件 事 : 

(1) 创建 Store 并 通过 依赖 注入 使 它 可 以 在 整个 应 用 中 被 访问 到 ; 

(2) 订阅 Store 的 变化 并 在 组 件 中 显示 出 来 ; 

(3) 当 发 生 某 些 变化 时 〈 例如 按 下 按钮 时 )， 我 们 将 通过 Store 来 分 发 一 个 action。 

计划 得 差不多 了 ， 下 面 来 看 看 如 何在 实践 中 应 用 ! 














E 











12.7 组建 Redux 
首先 导入 一 些 稍 后 要 用 到 的 东西 。 


code/redux/angular2-redux-chat/minimal/app.ts 
import { 
Component 
) from 'Gangular/core'; 
import ( NgModule ) from "eGangular/core"; 
import { BrowserModule } from "eangular/platform-browser"; 
import { platformBrowserDynamic } from "Gangular/platform-browser-dynamic"; 
import { 
createStore, 
Store, 
StoreEnhancer 
} from 'redux'; 
import ( counterReducer } from './counter-reducer'; 


我 们 导入 了 Store (类 ) 和 createStore (辅助 函数 )， 之 前 用 到 过 它们 。 我 们 还 导入 了 一 个 
叫 作 StoreEnhancer 的 新 类 ， 很 快 就 会 讲 到 它 。 


我 们 还 从 counter-reducerts 中 导 人 了 reducer， 从 app-state.ts 中 导入 了 state 的 接口 AppState。 








12.7.1 定义 应 用 的 state 
让 我 们 来 看 看 AppState。 


code/redux/angular2-redux-chat/minimal/app-state.ts 
export interface AppState { 
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counter: number; 


E 


这 里 把 中 央 state 的 结构 定义 成 了 AppState ， 它 是 一 个 对 象 并 且 只 有 一 个 键 counter ( 类 型 为 
number ) 在 下 个 示例 ( 聊天 应 用 ) 中 , 我 们 将 讨论 如 何 使 用 更 复杂 的 state, 但 目前 这 样 就 足够 了 。 

















12.7.2 定义 reducer 
接 下 来 定义 reducer， 它 负责 处 理应 用 state 中 计数 需 的 增加 和 减少 。 


code/redux/angular2-redux-chat/minimal/counter-reducer.ts 
mport [f 

INCREMENT, 

DECREMENT 
} from './counter-action-creators'; 


let initialState: AppState = { counter: 0 }; 


// Create our reducer that will handle changes to the state 
export const counterReducer: Reducer«AppState» - 
(state: AppState = initialState, action: Action): AppState => { 
switch (action.type) { 
case INCREMENT: 
return Object.assign((), state, { counter: state.counter + 1 jJ); 
case DECREMENT: 
return Object.assign((), state, { counter: state.counter - 1 j); 
default: 
return state; 
j 
N 
我 们 先导 入 了 两 个 常量 INCREMENT 和 DECREMENT ， 它 们 是 由 action creator 导 出 的 。 虽 然 它们 只 


是 被 简单 地 定义 成 了 字符 串 'INCREMENT' 和 'DECREMENT' ， 但 不 错 的 是 我 们 可 以 从 编译 器 那里 获 
得 额外 的 帮助 ， 以 防 打 错字 。 我 们 稍 后 再 来 看 看 这 些 action creators 


initialState 是 一 个 AppState， 它 的 counter 属 性 为 0。 


counterReducer 处 理 两 个 action : 使 当前 计数 器 加 1 的 INCREMENT 以 及 使 计数 器 减 1 的 
DECREMENT。 这 两 个 action 都 使 用 ob ject .assign 来 确保 不 会 改变 旧 的 state， 而 是 创建 一 个 新 对 象 
并 把 它 作为 新 的 state 返 回 。 


既然 说 到 了 这 里 ， 我 们 就 来 看 看 action creator。 
























































12.7.3 ŒX. action creator 


action creator 是 国 数 ， 返 回 的 是 定义 action 的 对 象 。 下 面 的 increment 和 decrement 国 数 会 返 
回 一 个 定义 了 合适 type 的 对 象 。 
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code/redux/angular2-redux-chat/minimal/counter-action-creators.ts 


import { 
Action, 
ActionCreator 

) from 'redux'; 


export const INCREMENT: 
export const increment: 


type: INCREMENT 
5; 


export const DECREMENT: 
export const decrement: 








type: DECREMENT 
5 


string = 'INCREMENT' ; 
ActionCreator«Action» = () => ({ 


string = 'DECREMENT'; 
ActionCreator«Action» = () => ({ 

















TEX action creator 国 数 返 回 的 是 类 型 ActionCreatorActiony ActionCreator 是 一 个 Redux 
定义 的 泛 型 类 ， 可 以 用 来 定义 action 的 创建 函数 。 在 这 个 例子 中 ， 我 们 使 用 的 具体 类 是 Action ， 
但 也 可 以 使 用 一 个 更 具体 的 类 ， 比 如 上 一 节 定 义 的 AddMessageAction。 








12.7.4 创建 store 


现在 有 了 reducer 和 state， 我 们 可 以 这 样 创建 store。 


let store: Store«AppState» = createStore«AppState»(counterReducer); 


^i, Reducti— dE RE. HUEVOS AH EEAEROT A TUB. ( 如 图 12-3 所 示 )。 特别 是 


Chrome 插 件 ”"， 我 们 可 以 用 它 监控 应 月 
































日 中 的 state 以 及 分 发 action。 





Counter 
Custom Store 


The counter value is: 2 


Em — 





图 12-3 


带 有 Redux 开 发 工具 的 计数 器 应 


BINTT 
TNCREMENT 
INCREMENT 


INCREMENT 


DECREMENT 





























s Dispatcher 

















uu 


(D https://chrome.google.com/webstore/detail/redux-devtools/Imhkpmbekcpmknklioeibfkpmmfibljd?hl-en 
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Redux DevTools 最 棒 的 一 点 是 ， 它 可 以 让 我 们 清楚 地 观察 到 每 个 action 如 何 流 经 本 系统 以 及 
它 对 state 的 影响 。 


R 现在 就 去 安装 Redux DevTools 中 的 Chrome 播 件 吧 ! 





要 想 使 用 开发 者 工具 ， 我 们 必须 先 做 一 件 事 : 把 它 添加 到 store 中 。 


code/redux/angular2-redux-chat/minimal/app.ts 


let devtools: StoreEnhancer«AppState» - 
window['devToolsExtension'] ? 
window['devToolsExtension']() : f => f; 


t 


并 不 是 每 个 使 用 我 们 应 用 的 人 都 安装 好 了 Redux DevTools。 上 述 代 码 会 检查 由 Redux 
DevTools 定 义 的 window.devToolsExtension。 如 果 它 存在 , 我 们 就 使 用 它 ; 否则 返回 一 个 identity 
function (f =、f )， 它 会 直接 返回 传 给 它 的 一 切 。 

















Qe middleware 是 一 个 术语 , 表示 用 来 强化 另 一 个 类 库 功 能 的 函数 。 Redux DevTools 
是 众多 Redux middleware 类 库 中 的 一 个 。Redux 支 持 许 多 有 趣 的 middleware， 如 
果 想 自己 写 也 很 容易 。 
你 可 以 在 http://redux.js.org/docs/advanced/Middleware.html 读 到 X 于 Redux 
middleware 的 更 多 内 容 。 











为 了 使 用 这 个 devtools ， 我 们 把 它 当 作 middleware 传 给 Redux 的 store。 





code/redux/angular2-redux-chat/minimal/app.ts 


let store: Store«AppState» - createStore«AppState»( 
counterReducer, 
devtools 


Js 
现在 ， 无 论 我 们 分 发 action 还 是 改变 state， 都 可 以 在 浏览 器 中 监测 到 了 。 

















12.8 CounterApp 组 件 


现在 已 经 设置 好 了 Redux 的 内 核 , 我 们 把 注意 力 转向 Angular 组 件 。 先 来 创建 应 用 的 顶层 组 件 
CounterApp。 它 将 被 用 来 引导 (bootstrap ) Angular。 


code/redux/angular2-redux-chat/minimal/app.ts 


GComponent ( f 
selector: 'minimal-redux-app', 
template: ^ 
«div» 
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«counter-component» 
«/counter-component» 
«/div» 


» 
class CounterApp { 


} 


这 个 组 件 所 做 的 一 切 就 是 创建 CounterComponent 的 一 个 实例 ， 我 们 马上 就 会 定义 它 。 在 此 
之 前 ， 让 我 们 先 来 启动 应 用 。 























12.9 提供 store 
我 们 将 用 CounterApp 作 为 应 用 的 根 组 件 。 记 住 ， 由 于 这 是 一 个 Redux 应 用 ， 我 们 需要 让 store 
的 实例 在 应 用 的 任何 地 方 都 能 被 访问 到 。 该 怎么 做 呢 ? 我 们 将 使 用 依赖 注入 技术 。 


还 记得 第 8 章 提 到 过 的 吗 ? 当 希望 通过 依赖 注入 来 获取 某 样 东西 时 ， 我 们 就 会 在 NgModule 中 
使 用 providers 配 置 项 将 其 添加 到 providers 列 表 中 。 


如 果 我 们 要 把 某 样 东西 提供 给 依赖 注入 系统 ， 需 要 指出 两 点 : 

(1) 用 于 指 代 这 个 可 注入 依赖 的 令 牌 ; 

(2) 注入 依赖 的 方式 。 

通常 ， 如 果 我 们 想 提 供 一 个 单 例 服 务 ， 可 能 会 像 这 样 使 用 useclass 选 项 : 
{ provide: SpotifyService, useClass: SpotifyService ) 


在 这 个 例子 中 ， 我 们 使 用 Spoti fyservice 类 作为 依赖 注入 系统 中 的 令 牌 。useClass 选 项 会 
告诉 Angular 创 建 SpotifyService 的 一 个 实例 , 并 且 无 论 何 时 要 求 注入 SpotifyService 都 会 复 用 
这 个 实例 ( 也 就 是 维护 一 个 单 例 )。 

不 过 使 用 这 种 方式 有 一 个 问题 : 我 们 不 想 让 Angular 创 建 store， 因 为 之 前 已 经 用 createStore 
创建 好 了 。 我 们 只 想 使 用 已 创建 好 的 store。 

要 这 么 做 ， 就 要 使 用 provide 中 的 useValue 选 项 。 之 前 我 们 已 经 使 用 过 像 API_URL 这 样 的 可 
配置 值 了 : 


( provide: API URL, useValue: 'http://localhost/api' } 


还 有 一 件 事 没有 解决 ,， 那 就 是 使 用 什么 样 的 令 牌 来 注入 。store 的 类 型 是 Store<AppStatey 。 













































































code/redux/angular2-redux-chat/minimal/app.ts 


let store: Store«AppState» - createStore«AppState»( 
counterReducer, 
devtools 


J 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


12.10 ”启动 应 用 305 




















Store 并 非 一 个 类 ， 而 是 一 个 接口 。 很 不 幸 ， 我 们 不 能 使 用 接口 作为 依赖 注入 的 键 。 











o 你 也 许 想 知道 接口 为 什么 不 能 作为 依赖 注入 的 键 。 答 案 就 是 ， 因 为 TypeSeript 
的 接口 在 编译 完成 后 就 会 被 移 除 ， 所 以 在 运行 环境 中 是 获取 不 到 的 。 
如 果 你 想 了 解 更 多 ， 请 参见 http://stackoverflow.com/questions/32254952/binding- 
a-class-to-an-interface、https://github.com/angular/angular/issues/135 和 http://victor- 
savkin. com/post/126514197956/dependency-injection-in-angular-1-and-angular-2 o 





这 就 表示 我 们 需要 创建 自己 的 令 牌 ， 用 来 注入 store。 谢 天 谢 地 ，Angular 让 这 项 任务 变 得 很 
上 容易。 我 们 在 store 的 文件 中 创建 这 个 令 牌 ， 这 样 就 可 以 在 应 用 的 任何 地 方 导 和 人 它 。 





code/redux/angular2-redux-chat/minimal/app-store.ts 


import { OpaqueToken } from 'Gangular/core'; 


export const AppStore = new OpaqueToken('App.store'); 


这 里 创建 了 一 个 const AppStore， 它 使 用 Angular 提 供 的 0paqueToken 类 。 相 对 于 直接 注入 
字符 串 ，0paqueToken 是 一 个 更 好 的 选择 ， 因 为 它 有 助 于 避免 命名 冲突 。 


现在 我 们 可 以 在 provide 中 使 用 AppStore 这 个 令 牌 了 。 开 工 ! 











12.40 ”启动 应 用 
回 到 app.ts 文 件 ， 我 们 创建 一 个 NgModule 来 启动 应 用 。 


code/redux/angular2-redux-chat/minimal/app.ts 


GNgModule(Í 
declarations: [ 
CounterApp, 

CounterComponent 


], 


imports: [ BrowserModule ], 
bootstrap: [ CounterApp ], 
providers: [ 
{provide: AppStore, useValue: store } 


] 


I» 
class CounterAppAppModule {} 


platformBrowserDynamic().bootstrapModule(CounterAppAppModule) 


现在 我 们 就 可 以 通过 注 和 人 AppStore 在 应 用 的 任何 地 方 引用 Redux 的 store 了 。 目 前 最 需要 它 的 
地 方 就 是 CounterComponent 。 
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12.11 CounterComponent 

















随 着 设置 的 完成 ,我 们 可 以 开始 创建 组 件 了 。 它 实际 上 负责 向 用 户 显 示 计 数 带 并 提供 按钮 来 
让 用 户 改变 state。 


12.11.1 import 
我 们 先 来 看 看 导入 。 


code/redux/angular2-redux-chat/minimal/CounterComponent.ts 
import { 
Component, 
Inject 
) from 'Gangular/core'; 
import { Store ) from 'redux'; 
import { AppStore } from './app-store'; 
import { AppState } from './app-state'; 
import x* as CounterActions from './counter-action-creators'; 


我 们 从 Redux 中 导入 了 Store 以 及 我 们 自己 的 注入 令 牌 AppStore， 它 可 以 让 我 们 引用 到 store 
的 单 例 。 我 们 还 导入 了 AppState 类 型 ， 这 有 助 于 我 们 掌握 中 央 state 的 结构 。 








最 后 ， 我 们 通过 * as CounterActions 语 法 导 人 了 所 有 的 action creator。 这 个 语法 会 让 我 们 
调用 CounterActions .increment() 来 创建 一 个 INCREMENT action 。 


12.11.2 ”模板 
我 们 来 看 看 CounterComponent 的 模板 C 如 图 12-4 所 示 )。 


code/redux/angular2-redux-chat/minimal/CounterComponent.ts 


GComponent( f 
selector: 'counter-component', 
template: ^ 
«div class="row"> 
«div class-"col-sm-6 col-md-4"» 
«div classz"thumbnail"» 
«div class="caption"> 
«h3»Counter«/h3» 
«p»Custom Store«/p» 


«p» 
The counter value is: 
<b>{{ counter }}</b> 
«/p» 


<p> 
«button (click)="increment()" 
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class="btn btn-primary"» 
Increment 
«/button» 
«button (click)s"decrement()" 
class="btn btn-default"» 




















Decrement 
«/button» 
«/p» 
«/div» 
«/div» 
«/div» 
«/div» 
Counter 
Custom Store 
The counter value is: 3 
Increment Decrement 
图 12-4 ”计数 器 应 用 的 模板 
里 有 三 点 需要 注意 


(1) (£ counter. }} 用 来 显示 计数 器 的 值 ; 
(2) 点 击 一 个 按钮 时 会 调用 increment( ) ; 
(3) 点 击 男 一 个 按钮 时 会 调用 decrement( )。 


12.11.3 constructor 


因为 这 个 组 件 依赖 于 store ， 所 以 我 们 要 在 构造 函数 中 把 它 注入 进来 。 这 里 示范 的 是 我 们 如 cam 
何 使 用 自 定 义 的 Appstore 令 牌 来 注入 依赖 。 


code/redux/angular2-redux-chat/minimal/CounterComponent.ts 





export default class CounterComponent { 
counter: number; 


constructor(GInject(AppStore) private store: Store«AppState») { 
Store.subscribe(() => this.readState()); 
this.readState(); 

j 


readState() ( 


let state: AppState - this.store.getState() as AppState; 
this.counter - state.counter; 
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} 


increment() { 
this.store.dispatch(CounterActions.increment()); 


} 


decrement() { 
this.store.dispatch(CounterActions.decrement()); 
j 
j 
我 们 使 用 eInject 注 解 来 注入 AppStore。 注 意 ， 我 们 把 变量 store 的 类 型 定义 成 了 Store 
«AppState» 。 这 里 使 用 的 注入 令 牌 和 用 类 作为 注入 令 牌 时 ( Angular 能 推断 出 要 注入 的 是 什么 ) 
KADE. 


我 们 把 store 设 置 为 一 个 实例 变量 ( 使 用 private store )。 有 了 store， 我 们 就 可 以 监听 它 的 
变化 了 。 这 里 调用 了 store.subscribe 和 this.readState(); 下 面 会 定义 readState。 


只 有 当 一 个 新 的 action 被 分 发 时 ，store 才 会 调用 subscribe, 因此 在 这 里 需要 确保 至 少 手 动 调 
用 readState 一 次 ， 以 保证 组 件 可 以 获取 到 初始 数据 。 


readState 方 法 从 store 中 读 取 state 并 把 this .counter 更 新 成 最 新 值 。 因 为 this .counter 是 类 
的 一 个 属性 并 在 视图 中 绑 定 ， 所 以 Angular 会 检测 到 它 发 生 了 变化 并 重新 演 染 组 件 。 


我 们 定义 了 两 个 辅助 方法 increment 和 decrement ， 它 们 分 别 把 各 自 的 action 分 发 到 store 中 。 



























































"uni 

















12.11.4 “整合 





下 面 是 CounterComponent 的 完整 代码 清单 。 


code/redux/angular2-redux-chat/minimal/CounterComponent.ts 
import { 
Component, 
Inject 
) from 'Gangular/core'; 
import { Store } from 'redux'; 
import { AppStore } from './app-store'; 
import { AppState } from './app-state'; 
import x* as CounterActions from './counter-action-creators'; 


GComponent ( { 

selector: 'counter-component', 

template: ^ 

«div class="row"> 
«div class-"col-sm-6 col-md-4"» 
«div classz"thumbnail"» 
«div class="caption"> 

«h3» Counter «/h3» 
«p»Custom Store«/p» 





图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 


12.11 CounterComponent 


309 





«p» 
The counter value is: 
<b>{{ counter }}</b> 
</p> 


<p> 
«button (click)="increment()" 
class="btn btn-primary"> 
Increment 
</button> 
«button (click)="decrement()" 
class="btn btn-default"> 
Decrement 
</button> 
</p> 
</div> 
</div> 
</div> 
</div> 


}) 
export default class CounterComponent { 
counter: number; 


constructor(GInject(AppStore) private store: Store«AppState») { 
Store.subscribe(() => this.readState()); 
this.readState(); 

} 


readState() { 
let state: AppState = this.store.getState() as AppState; 
this.counter = state.counter; 


j 


increment() { 
this.store.dispatch(CounterActions.increment()); 


} 


decrement() { 
this.store.dispatch(CounterActions.decrement()); 
j 
j 


试 一 下 (如 图 12-$ 所 示 )! 


cd code/redux/angular2-redux-chat 

npm install 

npm run go 

open http://localhost:8080/minimal.html 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 





310 第 12 章 基于 TypeScript 的 Redux 简介 





eoe DD ng-book 2 - minimal pure: x 





Œ | [5 localhost:8080/minimal.html pt | 三 





Inspector 
T 
Counter INCREMENT 
Custom Store INCREMENT 


The counter value is: 13 INCREMENT 


E o E 














图 12-5 工作 中 的 计数 器 应 


uu 














AE! 你 已 经 创建 了 第 一 个 Angular 和 Redux 应 用 ! 


12.12 ”更 进一步 
现在 我 们 已 经 使 用 Redux 和 Angular 构 建 了 一 个 基本 的 应 用 , 还 应 该 尝试 构建 一 个 更 复杂 的 应 
用 。 当 试图 构建 更 大 型 的 应 用 时 ， 我 们 会 遭遇 新 的 挑战 。 


a 如 何 组 合 使 用 reducer? 
口 如 何 从 state 的 不 同 分 支 中 提取 数据 ? 
口 如 何 组 织 Redux 代 码 ? 


在 下 一 章 中 ,我 们 将 构建 一 个 聊天 应 用 ， 并 在 其 中 处 理 所 有 这 些 问题 ! 





















































12.13 ”参考 资源 
如 果 你 想 学 习 更 多 关于 Redux 的 知识 ， 下 面 是 一 些 很 不 错 的 资源 。 


口 Redux 官 网 : http://redux.js.org/ 
口 Redux 作 者 的 视频 教程 : https://egghead.io/courses/getting-started-with-redux 
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O 真实 世界 中 的 Redux ( 幻灯 片 展示 ): https://speakerdeck.com/chrisui/real-world-redux 
O 强大 的 高 阶 reducer: http://slides.com/omnidan/hor 





要 学 习 更 多 如 何 结合 使 用 Redux 和 Angular 内 容 ， 请 查阅 以 下 资源 。 


口 angular2-redux: https://github.com/InfomediaLtd/angular2-redux 
O ng2-redux: https://github.com/angular-redux/ng2-redux 
O ngrx/store: https://github.com/ngrx/store 


继续 前 进 吧 ! 
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在 Angular 中 引入 Redux 











Redux 是 一 种 流行 且 优 雅 的 数据 架构 ， 我 们 在 上 一 章 学 习 了 它 的 相关 知识 。 我 们 还 构建 了 一 
个 非常 基础 的 应 用 ， 结 合 了 Angular 组 件 和 Redux 的 store。 





在 本 章 中 ， 我 们 将 进一步 展开 讲解 这 些 概 念 ， 并 在 其 基础 之 上 构建 一 个 更 复杂 的 聊天 应 用 。 
我 们 最 终 要 构建 出 的 应 用 如 图 13-1 所 示 。 





@®@ / D) Angular 2 - Chat with Rxus x | Blank | 











€ > CŒ [D localhost:8080 w| 


E c 


Echo Bot * 
l'II echo whatever you send me 
Reverse Bot 
"dil reverse whatever you send me 
Waiting Bot 
i l'Il wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





Wi Chat - Echo Bot 


l'Il echo whatever you n 
send me 











13-1. 完成 后 的 聊天 应 用 
13.1 阅读 背景 


在 第 10 章 和 第 11 章 中 , 我 们 用 RxJS 构 建 了 一 个 聊天 应 用 。 我 们 打算 再 构建 一 个 完全 相同 的 应 
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用 ,但 这 次 改 用 Redux。 这 样 你 就 能 对 比 同一 个 应 用 在 不 同 数据 架构 策略 下 的 实现 方式 了 。 


你 不 用 为 阅读 本 章 的 内 容 而 先 去 阅读 第 10 章 和 第 11 章 ,它们 是 相互 独立 的 。 如果 你 已 经 读 过 
了 那 两 章 ， 就 可 以 跳 过 本 章 中 代码 相同 的 那 部 分 内 容 ( 比如 ， 数 据 模型 本 身 并 没有 什么 变化 )。 


不 过 我 们 确实 希望 你 先 读 完 第 12 章 或 至 少 比较 熟悉 Redux。 


























13.2 ”聊天 应 用 概览 
这 个 应 用 提供 了 几 个 机 器 人 ， 你 可 以 和 它们 聊天 。 先 运行 这 些 代 码 看 看 : 


cd code/redux/angular2-redux-chat 
npm install 
npm run go 


MEEN Vas P TTA Thttp://localhost:8080.. 


如 果 上 面 的 链接 无 法 打开 ， 请 尝试 这 个 链接 : http;/localhost:8080/webpack- 
dev-server/index.html ; 


A 一 些 Windows 用 户 在 这 个 目录 下 运行 npm install 时 可 能 会 遇 到 问题 。 如 果 遇 到 
了 ， 请 先 确 保 自 己 是 在 Cygwin" 中 运行 这 些 命令 行 。 


在 本 应 用 中 ， 你 要 注意 以 下 几 点 : 

a 你 可 以 点 击 会 话 (thread ) 和 另 一 个 机 器 人 聊天 ; 
OQ 机 需 人 会 根据 各 自 的 性 格 来 回复 你 的 消息 ; 

口 右上 角 的 未 读 消息 总 数 会 自动 同步 。 

下 面 来 看 看 本 应 用 是 如 何 构造 的 。 我 们 有 :; 

口 三 个 顶层 Angular 组 件 

口 三 个 数据 模型 

口 两 个 reducer 及 其 各 自 的 action creator 














我 们 来 逐个 看 看 。 
13.2.1 组件 








将 页 面 分 解 成 三 个 顶层 组 件 ， 如 图 13-2 所 示 。 





(D https://www.cygwin.com/ 
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O ChatNavBar: 包含 未 读 消息 数 。 
口 ChatThreads : 展示 一 个 可 点 击 的 会 话 列表 ， 每 个 会 话 都 包含 最 新 消息 和 会 话 头 像 。 
O ChatWindow: 展示 当前 会 话 的 消息 和 一 个 用 来 发 送 新 消息 的 输入 框 。 





© / (5 Angular 2- Chat with Rxus x | Blank 








€ SC [!localhost:8080 





l'Il echo whatever you send me 


Reverse Bot 
dil lli reverse whatever you send me 


5D inel ChatThreads 


Waiting Bot 
I'll wait however many seconds you send to me before responding. Try sending '3* 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





ChatWindow 


$ Chat - Echo Bot 


l'Il echo whatever you n 
send me 





wite your messe ERAI 








图 13-2 ”Redux 聊 天 应 用 的 顶层 组 件 


13.2.2 ”数据 模型 
本 应 用 同样 包含 三 个 数据 模型 ， 如 图 13-3 所 示 。 


O User: 存储 聊天 参与 者 的 相关 信息 。 
口 Message: 存储 一 条 单独 的 信息 。 
口 Thread: 存储 一 组 消息 的 集合 以 及 一 些 与 这 次 会 话 有 关 的 其 他 数据 。 








id messages[] 


name 
avatarSrc 


author 





thread 





图 13-3 ”Redux 聊 天 应 用 的 数据 模型 
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13.2.3 reducer 


本 应 用 有 两 个 reducer。 


口 UsersReducer : 处 理 当前 用 户 的 相关 信息 。 
D ThreadsReducer: 处 理会 话 及 其 相关 的 消息 。 








13.2.4 总 结 
大 体 来 说 ， 本 应 用 的 数据 架构 是 这 样 的 : 


a 所 有 用 户 和 会 话 〈 它 保存 着 该 会 话 的 消息 列表 ) 相关 的 信息 都 保存 在 中 心 store 之 中 ; 
a 组 件 订阅 store 的 变化 并 显示 合适 的 数据 〈 未 读 消息 数 、 会 话 列表 和 消息 列表 本 身 ); 
口 当 用 户 发 送 一 条 消息 时 ， 组 件 就 会 向 store 中 分 发 一 个 action。 


本 章 其 余部 分 将 深入 讲解 如 何 用 Angular 和 Redux 来 实现 此 应 用 。 我 们 先 实 现 数据 模型 ,然后 
看 看 如 何 创建 应 用 的 state 和 reducer， 最 后 实现 组 件 。 



































13.3 ”实现 数据 模型 

我 们 先 从 简单 的 部 分 开始 ， 看 看 数据 模型 。 

我 们 会 用 interface( 接口 ) 来 规定 每 个 数据 模型 的 定义 。 这 不 是 必需 的 ， 你 也 可 以 使 用 更 
复杂 一 些 的 对 象 。 尽 管 如 此 ， 带 方法 的 对 象 可 能 会 改变 自己 的 内 部 状态 ， 而 这 会 破坏 我 们 努力 建 
立 的 函数 式 模型 。 

也 就 是 说 , 应 用 中 state 的 所 有 变化 都 只 能 由 reducer 发 起 ; state 中 的 对 象 本 身 应 该 是 不 可 变 的 。 

因此 ， 通 过 把 数据 模型 定义 为 interface ， 就 可 以 : 

(1) 在 编译 阶段 确保 我 们 使 用 的 对 象 是 符合 预期 格式 的 ; 

(2) 减少 风险 ， 比 如 不 小 心 往 数据 模型 对 象 中 添加 了 某 个 方法 而 导致 意 想不到 的 行为 。 


13.3.1 User CE 


User 接 口中 有 id 、name 和 avatarSrc。 



















































































code/redux/angular2-redux-chat/app/ts/models/User.ts 


export interface User { 
id: string; 
name: string; 
avatarSrc: string; 
isClient?: boolean; 
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我 们 还 有 一 个 布尔 值 属 性 isclient (问号 表明 这 个 字段 是 可 选 的 )。 当 使 用 本 应 用 的 是 人 而 
不 是 机 器 人 时 ， 我 们 会 把 user 中 的 该 字段 设 为 true。 














13.3.2 Thread 





同样 ，Thread 也 是 一 个 TypeScript 接 口 。 


code/redux/angular2-redux-chat/app/ts/models/Thread.ts 
export interface Thread { 

id: string; 

name: string; 

avatarSrc: string; 

messages: Message[]; 


j 
我 们 存储 了 Thread 的 id 、name 和 avatarSrc， 而 messages 字 段 中 存储 的 是 Message 的 数组 。 


13.3.3 Message 


Message 是 第 三 个 也 是 最 后 一 个 数据 模型 的 interface。 


























code/redux/angular2-redux-chat/app/ts/models/Message.ts 


export interface Message { 
id?: string; 
sentAt?: Date; 
isRead?: boolean; 
thread?: Thread; 
author: User; 
text: string; 


} 

每 条 消息 都 包含 以 下 内 容 。 

D id: 消息 的 id。 

O sentAt: 消息 的 发 送 时 间 。 

Q isRead: 一 个 布尔 值 标识 ， 表 示 消 息 是 否 已 读 。 
O author: 写 这 条 消息 的 user。 

D text: 消息 的 文本 内 容 。 

D thread: 对 包含 这 条 消息 的 Thread 的 引用 。 

















13.4 ”应 用 的 state 


现在 有 了 数据 模型 ,我 们 再 来 讨论 一 下 中 心 state 的 模型 。 在 前 一 章 中 ， 我 们 的 中 心 state 是 一 
个 对 象 。 它 有 一 个 counter 键 ， 值 的 类 型 是 一 个 number 。 然 而 这 个 应 用 的 state 就 要 复杂 多 了 。 
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下 面 是 应 用 state 的 第 一 部 分 。 








code/redux/angular2-redux-chat/app/ts/reducers/index.ts 


export interface AppState { 
users: UsersState; 
threads: ThreadsState; 

j 




















AppState 也 是 一 个 interface， 它 有 两 个 顶级 的 键 : users 和 threads。 这 两 个 键 本 身 是 通过 


两 个 接口 UsersState 和 ThreadsState 来 定义 的 ， 而 这 两 个 接口 是 在 它们 各 自 的 reducer 文 件 中 定 
义 的 。 





13.4.1 关于 代码 布局 


在 Redux 应 用 中 ， 一 种 常用 的 模式 是 : 顶级 state 中 的 每 个 reducer 都 对 应 一 个 顶级 的 键 。 这 个 
应 用 的 顶级 reducer 在 reducers/index.ts 文 件 中 。 


每 个 reducer 都 有 自己 的 文件 。 每 个 文件 中 都 有 如 下 内 容 : 


O 用 来 描述 state 树 当前 分 支 的 interface; 

D state 树 当前 分 文 的 初始 值 ; 

D reducer 本 身 ; 

口 任何 用 来 查询 state 树 当前 分 支 的 选择 器 一 一 我 们 还 没有 讨论 过 选择 器 , 但 是 很 快 就 要 讲 到 了 。 
我 们 之 所 以 把 所 有 这 些 截然 不 同 的 东西 放 在 一 起 , 是 因为 它们 都 是 用 来 处 理 state 树 的 当前 分 

支 的 。 通 过 把 这 些 都 放 在 同一 个 文件 中 ， 可 以 很 容易 地 同时 对 它们 进行 重 构 。 


只 要 愿意 ,你 完全 可 以 使 用 多 级 和 藤 套 的 布局 。 如 果 要 分 解 应 用 中 的 大 型 模块 ， 这 是 一 种 很 好 
的 方式 。 



































13.4.2 $R reducer 
讨论 到 如 何 拆 分 reducer， 我 们 来 看 看 根 reducer。 


code/redux/angular2-redux-chat/app/ts/reducers/index.ts 


export interface AppState { 
users: UsersState; 
threads: ThreadsState; 


} 





const rootReducer: Reducer«AppState» = combineReducers<AppState>({ 
users: UsersReducer, 


threads: ThreadsReducer 


5; 
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注意 这 里 的 对 称 性 : UsersReducer 作用 于 users 键 ， 而 users 键 的 类 型 是 UsersState ; 
ThreadsReducer 作 用 于 threads 键 ， 而 threads 键 的 类 型 是 ThreadsState。 











combineReducers 让 这 一 切 成 为 可 能 。 它 接收 一 个 由 键 和 reducer 组 成 的 映射 表 (map ) 并 返 
回 一 个 新 的 reducer， 这 个 新 的 reducer 可 以 根据 这 些 键 进行 相应 的 操作 。 


当然 ， 我 们 还 没 看 完 AppState 的 结构 ， 现 在 继续 。 














13.4.3 UserState 
UsersState 保 存 了 currentUser 的 一 个 引用 。 


code/redux/angular2-redux-chat/app/ts/reducers/UsersReducer.ts 


export interface UsersState { 
currentUser: User; 


E 


const initialState: UsersState = { 
currentUser: null 


E 


想象 一 下 ，state 树 的 这 条 分 支 其 实 可 以 存储 与 用 户 有 关 的 任何 信息 ， 比 如 最 后 上 线 的 时 间 、 
空闲 时 间 等 。 不 过 目前 这 样 就 足够 了 。 























下 面 我 们 会 在 定义 reducer 时 使 用 initialState， 但 此 刻 只 是 把 当前 用 户 设置 为 null。 


13.4.4 ThreadsState 


来 看 一 下 ThreadsState。 





code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export interface ThreadsEntities { 
[id: string]: Thread; 
j 


export interface ThreadsState { 
ids: string[]; 
entities: ThreadsEntities; 
currentThreadId?: string; 


J 


const initialState: ThreadsState = { 
ids: [], 
currentThreadId: null, 
entities: {} 


T 





首先 定义 了 接口 ThreadsEntities。 它 是 一 个 键 为 会 话 id， 值 为 会 话 的 映射 表 。 这 样 我 们 就 
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能 在 这 个 映射 表 中 通过 id 找到 任意 一 个 会 话 了 。 


在 ThreadsState 中 还 存储 了 一 个 名 叫 idqs 的 数组 。 它 用 来 存储 在 entities 中 能 找到 的 所 有 会 
话 的 id 列表 。 


Qe 常用 类 库 normalizr "用 到 了 这 种 策略 。 它 的 理念 是 ， 一 旦 标准 化 了 在 Redux 的 
state 中 存储 实体 的 方式 ， 就 可 以 建造 辅助 类 库 并 清晰 地 使 用 它 了 。 使 用 了 
normalizr 之 后 , 我 们 就 有 了 大 量 的 选择 来 让 工作 更 高 效 , 而 不 作 了 解 每 个 state 
树 的 格式 。 
我 决定 不 在 本 章 中 讲解 normalizr ， 因 为 还 有 许多 其 他 东西 要 学 。 不 过 我 确实 
很 喜欢 在 产品 级 应 用 中 使 用 normalizr。 
另外 ，normalizr 是 完全 可 选 的 ， 即 使 不 在 本 应 用 中 使 用 也 不 会 导致 任何 重大 
的 变化 。 
如 果 要 学 习 normalizr ， 请 查阅 官方 文档 https://github.com/paularmstrong/ 
normalizr、 博 客 https://medium.com/@mcowpercoles/using-normalizr-js-in-a-redux- 
store-96ab33991369#.18ur7ipu6 和 Redux 作 者 Dan Abramov 在 Twitter 上 的 转发 
https://twitter.com/dan abramov/status/663032263702106112。 





























我 们 用 currentThreadId 保 存 正在 浏览 的 会 话 id， 目 的 是 了 解 用 户 正在 浏览 的 是 哪个 会 话 。 
把 initialState 都 设置 为 “ 空 值 ”。 


13.4.5 “可视化 AppState 


Redux DevTools 为 我 们 提供 了 一 个 Chart 视 图 ， 它 可 以 让 我 们 检查 应 用 的 state。 图 13-4 展 示 了 
启动 后 的 所 有 演示 数据 。 











(D https://github.com/paularmstrong/normalizr 
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Autoselect instances 

















图 13-4 Redux 聊天 应 用 的 状态 图 
更 棒 的 是 可 以 把 鼠标 悬 停 在 单个 节点 上 来 查看 这 条 数据 的 各 个 属性 ， 如 图 13-$ 所 示 。 
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Autoselect instances 


"name": "currentThreadId", 
"value": "tLadycap" 


m Dispatcher 








图 13-5 ”查看 当前 回话 
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13.5 构建 reducer (和 action creator) 


有 了 中 心 state， 就 可 以 用 reducer 来 改变 它 了 ! 


既然 reducer 要 处 理 action， 我 们 就 要 知道 reducer 中 action 的 格式 。 因 此 在 构建 reducer 的 同时 也 
把 action creator 构 建 出 来 。 











13.5.4 设置 当前 用 户 的 action creator 


UserState 中 存储 着 当前 用 户 ， 因 此 需要 一 个 action 来 设置 当前 用 户 。 我 们 会 在 actions 文 件 夹 
中 保存 这 些 action 文 件 ， 并 且 文 件 名 要 和 它们 对 应 的 reducer 保 持 一 致 ， 比 如 在 这 个 例子 中 的 文件 
名 是 UserActions。 























code/redux/angular2-redux-chat/app/ts/actions/UserActions.ts 


export const SET CURRENT USER = '[User] Set Current'; 
export interface SetCurrentUserAction extends Action { 
user: User; 


j 
export const setCurrentUser: ActionCreator«SetCurrentUserAction» - 
(user) => ({ 
type: SET CURRENT USER, 
user: user 


5 
这 里 定义 了 const SET_CURRENT_USER。 我 们 将 在 reducer 的 switch 语 句 中 使 用 它 。 


我 们 还 定义 了 一 个 新 的 子 接口 SetCurrentUserAction， 它 继承 了 Action 并 添加 了 一 个 user 
性 。 我 们 会 用 user 属 性 表明 要 把 哪个 用 户 作 为 当前 用 户 。 


函数 setCurrentUser 就 是 我 们 的 action creator 函 数 。 它 接收 一 个 user 参 数 并 返回 一 个 
SetCurrentUserAction。 我 们 要 把 这 个 返回 值 传 给 reducer 的 action。 




















Kus 
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13.5.2 UsersReducer: 设置 当前 用 户 
现在 我 们 把 视线 转向 UsersReducer 。 


code/redux/angular2-redux-chat/app/ts/reducers/UsersReducer.ts 


export const UsersReducer = 
function(state: UsersState = initialState, action: Action): UsersState { 
switch (action.type) { 
case UserActions.SET_CURRENT_USER: 
const user: User = («UserActions.SetCurrentUserAction»action).user; 
return { 
currentUser: user 
}; 
default: 
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return state; 
] 
Ji 
和 所 有 reducer 一 样 UsersReducer 返回 一 个 新 的 state 。 在 这 个 例子 中 ， 它 的 类 型 是 


UsersState,; 








接 下 来 对 action.type 使 用 switch 语 句 ， 然 后 处 理 UserActions .SET_CURRENT_USER 分 支 。 


为 了 设置 当前 用 户 , 我 们 需要 从 输入 的 action 中 获取 user « 为 了 做 到 这 一 点 , 首先 要 把 action 
转换 成 userActions.SetCurrentUserAction ， 然 后 读 取 它 的 .user 字 段 。 











这 似乎 有 点 奇怪 。 我 们 本 来 已 经 创建 了 SetCurrentUserAction， 但 现在 switch 
语句 中 使 用 的 却 是 字符 串 type， 并 不 是 直接 使 用 类 型 。 

实际 上 ， 这 是 受 TypeScript 所 近 。 当 TypeScript 被 编译 成 JavaScript 后 会 丢失 接口 
的 元 数据 。 我 们 也 可 以 尝试 使 用 一 些 反射 机 制 (装饰 器 元 数据 或 构造 函数 等 等 ) 
来 实现 。 

在 分 发 的 时 候 将 SetCurrentUserAction 转 换 成 Action, 在 这 里 又 要 转换 回去 , 这 
样 确实 不 够 优雅 ; 但 对 于 这 个 应 用 来 说 , 这 是 处 理 “ 多 态 分 发 ”的 一 种 简便 做 法 。 





我 们 需要 返回 一 个 新 的 UserState。 因 为 UserState 只 有 一 个 键 ， 所 以 相应 的 结果 对 象 只 有 
currentUser 键 并 用 所 传人 action 中 的 user 属 性 作为 值 。 











13.5.8 会话 和 消息 概览 


这 个 应 用 的 核心 是 会 话 中 的 消息 。 我 们 需要 实现 三 个 action: 
(1) 往 state 中 添加 一 个 新 会 话 ; 

(2) 往 会 话 中 添加 消息 ; 

(3) 选择 一 个 会 话 。 


我 们 先 来 创建 一 个 新 会 话 。 





13.5.4 ”添加 新 会 话 的 action creator 
下 面 是 用 来 往 state 中 添加 新 会 话 的 action creator. 


code/redux/angular2-redux-chat/app/ts/actions/ThreadActions.ts 


export const ADD THREAD = '[Thread] Add'; 

export interface AddThreadAction extends Action { 
thread: Thread; 

j 


export const addThread: ActionCreator«AddThreadAction» - 
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(thread) => ({ 
type: ADD THREAD, 
thread: thread 


}); 
主意 ， 它 在 结构 上 和 我 们 的 前 一 个 action creator 非 常 相似 。 我 们 定义 了 一 个 用 在 switch 语 句 
中 的 常量 ADD_THREAD、 一 个 自 定义 的 Action 和 一 个 用 来 生成 Action 的 action creator addThread。 








这 里 并 没有 初始 化 Thread 本 身 ， 因 为 这 个 Thread 是 作为 参数 传 进来 的 。 


13.5.5 ”添加 新 会 话 的 reducer 
现在 通过 处 理 ADD_THREAD 分 支 来 创建 ThreadsReducer。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const ThreadsReducer = 
function(state: ThreadsState = initialState, action: Action): ThreadsState { 
switch (action.type) { 


// Adds a new Thread to the list of entities 
case ThreadActions.ADD THREAD: { 
const thread - («ThreadActions.AddThreadAction»action).thread; 


if (state.ids.includes(thread.id)) { 
return state; 


j 


return { 
ids: [ ...state.ids, thread.id ], 
currentThreadId: state.currentThreadId, 
entities: Object.assign((], state.entities, { 

[thread.id]: thread 

)) 

}; 

} 


// Adds a new Message to a particular Thread 





ThreadsReducer 人 处理 的 是 ThreadsState。 当 人 处理 ADD_THREAD 这 个 action 时 ， 我 们 把 action 
对 象 类 型 又 转换 回 了 ThreadActions .AddThreadAction 并 从 中 取出 thread。 


接着 检查 在 state.ids 的 列表 中 是 否 包 含 这 个 新 的 thread.id。 如 果 已 经 有 了 ， 那 么 就 不 作 
任何 改动 ， 直 接 返 回 当前 的 state。 


但 如 果 这 个 thread 是 新 的 ， 那 就 要 把 它 添加 到 当前 的 state 中 。 


记 住 , 创建 一 个 新 的 ThreadsState 时 要 格外 小 心 ， 不 要 修改 旧 的 state。 这 个 state 比 我 们 以 前 
接触 过 的 要 复杂 得 多 ， 但 在 处 理 原则 上 是 基本 一 致 的 。 


我 们 先 把 thread. id 添加 到 ids 数 组 中 。 这 里 使 用 了 ES6 的 展开 操作 符 C... ) 来 表明 我 们 想 
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把 所 有 现存 的 state.ids 放 和 人 新 数组 之 中 并 在 数组 结尾 处 添加 thred.id。 


添加 一 个 新 会 话 时 currentThreadId 并 没有 改变 ， 所 以 这 里 直接 返回 原来 的 state. 
currentThreadId 即 可 。 


对 于 entities ， 需 要 记 住 的 是 它 是 一 个 对 象 。 它 的 键 是 每 个 会 话 的 id 字符 串 ， 值 是 这 个 会 话 


本 身 。 这 里 使 用 ob ject .assign 来 创建 一 个 新 对 象 , 新 对 象 中 包含 了 老 的 state.entities 和 一 个 
新 的 thread 对 象 。 





























Q, RAAT rta polo EDAM ER ERRIRE? 别人 也 都 
AM! 事实 上 ， 这 样 做 会 很 容易 意外 修改 原始 数据 。 
Fs 就 是 出 现 Immutable.js 的 原因 了 。 和 Redux 一 起 使 用 p .js 通常 就 是 出 
于 这 个 目的 。Immutable 会 帮 我 们 处 理 好 这 些 原本 需要 小 心 进 行 的 更 新 。 
我 建议 你 查看 Immutablejs， 看 看 它 对 写 reducer 是 否 更 合适 。 

















现在 就 可 以 把 新 会 话 添加 到 中 心 state 里 了 1! 


13.5.6 ”添加 新 消息 的 action creator 


有 了 会 话 ， 我 们 就 可 以 开始 往 里 面 添加 消息 了 
为 添加 消息 定义 一 个 新 的 action。 





code/redux/angular2-redux-chat/app/ts/actions/ThreadA ctions.ts 


export const ADD MESSAGE - '[Thread] Add Message'; 
export interface AddMessageAction extends Action { 
thread: Thread; 
message: Message; 


} 
AddMessageAction 往 会 话 中 添加 一 条 消息 。 
下 面 是 添加 新 消息 的 action creator。 


code/redux/angular2-redux-chat/app/ts/actions/ThreadA ctions.ts 


export const addMessage: ActionCreator«AddMessageAction» - 
(thread: Thread, messageArgs: Message): AddMessageAction -» { 
const defaults = { 
id: uuid(), 
sentAt: new Date(), 
isRead: false, 
thread: thread 
d» 





(D https://facebook.github.io/immutable-js/ 
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const message: Message = Object.assign((], defaults, messageArgs); 


return { 
type: ADD MESSAGE, 
thread: thread, 
message: message 
H 
du 
addMessage3X faction creator 接 收 一 个 thread 和 一 个 准备 加 工 成 消息 的 对 象 。 注 意 ， 这 里 保 
留 了 一 TaefailteMME, 目的 是 把 创建 id、 人 SER, X 


于 发 送信 息 的 人 来 说 ， 这 样 就 完全 不 用 关心 UUID 的 具体 格式 是 什么 


如 果 用 户 已 经 事先 用 UUID 类 库 创建 好 了 自 带 id 的 消息 ， 当 用 户 发 送 这 条 消息 时 ， 我 们 也 会 
将 它 保 存 起 来 。 为 了 实现 这 种 默认 行为 ， 先 把 messageArgs 合 并 到 defaults 之 中 ， 再 合并 到 一 个 
新 的 对 象 中 。 


最 后 ， 我 们 返回 了 带 有 thread 和 新 的 message 且 类 型 为 ADD_MESSAGE 的 action。 





















































13.5.7 ”添加 新 消息 的 reducer 


现在 我 们 要 在 ThreadsReducer 中 添加 ADD_MESSAGE 的 处 理 器 。 要 添加 一 条 新 消息 , 我 们 就 要 
获得 这 个 会 话 ， 然 后 把 消息 添加 到 这 个 会 话 中 。 


里 还 有 微妙 的 一 点 要 处 理 : 如 果 该 thread 是 当前 会 话 ， 那 就 要 将 这 条 消息 标记 为 已 读 。 


用 户 永 远 都 会 有 一 个 会 话 是 当前 会 话 , 也 就 是 他 们 正在 查看 的 会 话 。 我 们 的 意思 是 ,如果 把 
一 条 新 消息 添加 到 了 当前 会 话 中 ， 那 么 它 就 会 被 自动 标记 为 已 读 。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 



























































case ThreadActions.ADD_MESSAGE: { 
const thread = (<ThreadActions.AddMessageAction>action).thread; 
const message = («ThreadActions.AddMessageAction»action).message; 


// special case: if the message being added is in the current thread, then 
// mark it as read 
const isRead - message.thread.id --- state.currentThreadId ? 
true : message.isRead; 
const newMessage = Object.assign((), message, { isRead: isRead ]); 


// grab the old thraed from entities 
const oldThread - state.entities[thread.id]; 


// create a new thread which has our newMessage 
const newThread = Object.assign((), oldThread, { 


messages: [...oldThread.messages, newMessage] 


的 


return { 
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ids: state.ids, // unchanged 
currentThreadId: state.currentThreadId, // unchanged 
entities: Object.assign((], state.entities, { 
[thread.id]: newThread 
}) 
15 
j 


// Select a particular thread in the UI 


这 段 代 码 有 点 长 ， 因 为 我 们 要 小 心地 避免 修改 原来 的 会 话 , 但 它 大 体 上 和 我 们 以 前 所 做 的 没 
什么 不 同 。 


首先 ， 提 取出 上 thread 和 message。 
如 果 这 条 消息 属于 当前 会 话 ( 接 下 来 就 会 看 到 如 何 设置 当前 会 话 ), 我 们 就 把 它 标 记 为 已 读 。 
然后 ， 我 们 抓 取 oldThread 并 把 newMessage 追 加 到 旧 的 messages 数 组 ， 以 创建 newThread。 


最 后 ， 我 们 返回 新 的 ThreadsState。 当 前 的 会 话 ids 列 表 和 currentThreadId 在 添加 一 条 新 
消息 时 都 没有 变 , 所 以 这 里 直接 使 用 原 有 值 。 唯 一 改变 的 就 是 我 们 用 newthread 更 新 了 entities。 


现在 来 实现 我 们 数据 骨架 的 最 后 一 部 分 :选择 会 话 。 









































13.5.8 ”选择 会 话 的 action creator 


用 户 可 以 同时 进行 多 个 聊天 会 话 ， 但 是 只 有 一 个 聊天 窗口 (也 就 是 用 户 可 以 阅读 和 发 送 消 
息 的 地 方 )。 当 用 户 点 击 了 一 个 会 话 ， 我 们 就 要 在 聊天 窗口 中 展示 这 个 会 话 中 的 消息 ， 如 图 13-6 
所 示 。 




















Echo Bot 
l'Il echo whatever you send me 
Reverse Bot * 

2 l'il reverse whatever you send me 


Waiting Bot 
l'il wait however many seconds you send to me before responding. Try sending '3 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


图 13-6 ”选择 一 个 会 话 


我 们 需要 记录 哪个 会 话 是 当前 选中 的 会 话 。 要 做 到 这 一 点 ， 需 要 使 用 ThreadsState 中 的 
currentThreadId 属 性 。 

















图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


13.5 4493€ reducer ( 和 action creator ) 327 





我 们 来 创建 它 的 action 。 


code/redux/angular2-redux-chat/app/ts/actions/ThreadActions.ts 


export const SELECT. THREAD = '[Thread] Select'; 
export interface SelectThreadAction extends Action { 
thread: Thread; 


j 
export const selectThread: ActionCreator«SelectThreadAction» - 
(thread) => ({ 
type: SELECT_THREAD, 
thread: thread 
p 


这 个 action 中 并 没有 引入 新 概念 ， 只 有 新 的 动作 类 型 SELECT_THREAD 和 当前 选中 并 作为 参数 
传人 的 thread。 


13.5.9 选择 会 话 的 reducer 


选择 一 个 thread 需 要 做 两 件 事 : 
(1) 把 currentThreadId 设 置 为 选中 thread 的 id; 
Q) 把 这 个 thread 中 的 所 有 消息 标记 为 已 读 。 

下 面 是 这 个 reducer 的 代码 。 




















code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


case ThreadActions.SELECT THREAD: { 
const thread - («ThreadActions.SelectThreadAction»action).thread; 
const oldThread - state.entities[thread.id]; 


// mark the messages as read 
const newMessages = oldThread.messages.map( 
(message) => Object.assign(Í[], message, { isRead: true })); 


// give them to this new thread 
const newThread = Object.assign((], oldThread, { 
messages: newMessages 


); 





return { 
ids: state.ids, 
currentThreadId: thread.id, 
entities: Object.assign((], state.entities, { 

[thread.id]: newThread 

}) 

}; 

} 


default: 
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return state; 
} 
In 


首先 获取 要 选择 的 thread 然 后 使 用 thread.id 从 state 中 得 到 当前 会 话 的 值 。 





Q 这 是 个 防御 型 策略 。 为 什么 不 直接 使 用 传 进来 的 thread 呢 ? 对 于 一 些 应 用 来 说 
这 也 许 是 正确 的 设计 决策 。 但 在 这 个 例子 中 ， 需 要 通过 读 取 state.entities 中 
会 话 的 最 后 一 个 已 知 值 来 使 thread 免 受 外 部 修改 。 




















接 下 来 ,我们 创建 所 有 旧 消 息 的 副本 并 把 它们 全 部 设置 为 isRead: true。 然 后 把 新 的 已 读 
消息 列表 赋 给 newThread。 


最 后 ， 我 们 返回 新 的 ThreadsState。 





13.5.10 reducer 总 结 
完成 了 ! 这 些 就 是 搭建 数据 架构 的 骨架 所 需 的 一 切 。 
回顾 一 下 ，UsersReducer 负 责 维护 当 前 用 户 ， 而 ThreadsReducer 则 负责 管理 : 
口 会 话 列表 
口 会 话 中 的 消息 列表 
口 当前 选中 的 会 话 
我 们 可 以 从 这 些 数据 中 拿 到 所 需 的 一 切 了 ( 比如 未 读 消 息 数 )。 
接 下 来 就 把 它们 和 组 件 连接 在 一 起 ! 























na 











13.6 ”构建 Angular 聊天 应 用 


如 前 所 述 ， 页 面 会 被 分 解 成 三 个 顶层 组 件 ， 如 图 13-7 所 示 。 

D ChatNavBar: 包含 未 读 消息 数 。 

O ChatThreads: 展示 一 个 可 点 击 的 会 话 列 表 ， 每 个 会 话 包含 最 后 一 条 消息 和 会 话 头 像 。 
口 Chatwindow: 展示 当前 会 话 的 消息 和 一 个 用 来 发 送 新 消息 的 输入 框 。 
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|. 0 0 / D anguar2 - Chatwith Rss x 二 Blank | 
€ SC [M localhost:8080 xl 三 
rosent 


g ERA ChatThreads 


Reverse Bot 
dil rl reverse whatever you send me 


Waiting Bot 
dil |! wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 





ChatWindow 


Wi Chat - Echo Bot 
l'Il echo whatever you n 


send me 











图 13-7 Redux 聊 天 应 用 的 顶层 组 件 


我 们 要 像 上 一 童 一 样 启动 本 应 用 。 在 应 用 的 最 上 层 ， 我 们 初始 化 Redux store 并 通过 Angular 
的 依赖 注入 系统 来 提供 它 。( 如 果 觉 得 陌生 ， 请 重新 阅读 上 一 章 。) 


code/redux/angular2-redux-chat/app/ts/app.ts 


let store: Store«AppState» - createStore«AppState»( 
reducer, 
compose(devtools) 


好 


GNgModule( 1 
declarations: [ 

ChatApp, 

ChatPage, 

ChatThreads, 
ChatNavBar, 
ChatWindow, 
ChatThread, 
ChatMessage, 
FromNowPipe 





[m 

imports: [ 
BrowserModule, 
FormsModule 

], 

bootstrap: [ ChatApp ], 

providers: [ 
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( provide: AppStore, useFactory: () -» store } 
] 
» 
class ChatAppModule {} 


platformBrowserDynamic().bootstrapModule(ChatAppModule) 


13.6.1 ”顶层 组 件 ChatApp 
ChatApp 是 顶层 组 件 ， 只 负责 演 染 chatPage 组 件 。 


code/redux/angular2-redux-chat/app/ts/app.ts 
GComponent( f 
selector: 'chat-app', 
template: ^ 
«div» 
«chat-page» «/chat-page» 
«/div» 


}) 
class ChatApp { 


constructor(GInject(AppStore) private store: Store«AppState») { 
ChatExampleData(store); 


} 
} 


这 个 应 用 中 机 器 人 的 数据 来 自 客 户 端 而 不 是 服务 器 端 。ChatExampleData( ) 函 
数 为 应 用 设置 了 初始 数据 。 我 们 不 会 在 本 书 中 具体 解释 这 段 代 码 ， 如 果 你 想 了 
解 它 的 工作 细节 ， 可 以 随时 查阅 源 代码 。 





我 们 没有 在 这 个 应 用 中 使 用 路 由 。 如 果 要 用 的 话 , 可 以 把 与 路 由 相关 的 内 容 放 到 应 用 的 顶层 
组 件 之 中 。 现 在 只 创建 chatPage 组 件 来 演 染 应 用 的 主体 部 分 。 

这 个 应 用 中 没有 其 他 页 面 , 但 为 每 个 页 面 分 配 一 个 组 件 仍 然 是 个 好 主意 , 毕竟 将 来 万 一 还 要 
添加 其 他 页 面 呢 。 





13.6.2 ChatPage 





聊天 页 面 会 泻 染 三 个 主要 组 件 : 


口 ChatNavBar 
口 ChatThreads 
口 ChatWindow 


下 面 是 其 代码 。 
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code/redux/angular2-redux-chat/app/ts/pages/ChatP age.ts 


GComponent ( f 
selector: 'chat-page', 
template: ^ 
«div» 
«chat-nav-bar»«/chat-nav-bar» 
«div class-z"container"» 
«chat-threads»«/chat-threads» 
«chat-window»«/chat-window» 
«/div» 
«/div» 


}) 
export default class ChatPage { 


} 


我 们 在 这 个 应 用 中 使 用 的 是 一 种 叫 作 容器 型 组 件 的 设计 模式 。 这 三 个 组 件 都 是 容器 型 组 件 。 
下 面 就 来 解释 一 下 。 





13.6.3 ”容器 型 组 件 与 展示 型 组 件 


如 果 数 据 散布 于 所 有 组 件 中 , 那么 这 个 应 用 就 会 很 难 理解 。 然 而 ,我 们 的 应 用 是 动态 的 , 组 
件 需要 运行 时 的 数据 来 填充 ， 也 需要 响应 用 户 的 交互 。 


缓解 这 种 冲突 的 模式 之 一 就 是 区 分 展示 型 组 件 与 容器 型 组 件 的 概念 。 具 体 来 说 是 这 样 的 : 

(1) 要 让 与 外 部 数据 源 (例如 API、Redux store 、Cookies 等 ) 交互 的 组 件 尽 可 能 少 ; 

(2) 要 有 意识 地 将 数据 访问 放 在 容器 型 组 件 之 中 ; 

(3) 对 于 纯 “ 功 能 性 ”的 展示 型 组 件 ， 要 求 它 的 所 有 属性 (输入 和 输出 ) 都 由 容器 型 组 件 来 
管理 。 

这 种 设计 的 好 处 在 于 展示 型 组 件 的 行为 是 可 预测 的 。 它 们 可 以 复 用 , 因为 它们 只 关心 自己 用 
到 的 那 部 分 数据 ， 从 不 对 整体 的 数据 架构 作出 任何 假设 。 

即使 不 考虑 可 复 用 性 ,其 可 预测 性 也 是 一 个 优点 。 对 于 相同 的 输入 , 它们 总 是 会 给 出 相同 的 
输出 ( 比如 用 相同 的 方式 演 染 )。 
























































仔细 想 想 ， 你 会 发 现 要 求 reducer 必 须 是 纯 函 数 和 要 求 展示 型 组 件 必须 是 “ 纯 组 
件 ” 背 后 的 哲学 是 一 样 的 。 





























如 果 整 个 应 用 全 都 是 展示 型 组 件 , 那 是 最 理想 的 。 但 现实 世界 中 的 数据 是 杂乱 、 不 断 变化 的 ， 
所 以 我 们 可 以 试 着 把 用 来 适应 真实 世界 的 各 种 复杂 数据 封装 到 容器 型 组 件 中 。 
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如 果 你 是 高 级 程序 员 , 可 能 会 发 现在 MVC 和 容器 /展示 型 组 件 之 间 存 在 着 一 种 不 
大 准确 的 比喻 。 也 就 是 说 ， 展示 型 组 件 类 似 于 所 传 入 数据 的 “视图 ”， 而 容器 型 
组 件 则 类 似 于 “控制 器 ”"， 它 接收 “数据 模型 ”( 应 用 其 他 部 分 的 数据 ) 并 在 进 
行 适 配 之 后 传 给 展示 型 组 件 。 

但 如 果 你 还 是 编程 界 的 新 兵 ， 那 就 先 别 试图 理解 “Angular 组 件 本 身 就 是 视图 和 
控制 器 ”这 种 比喻 了 。 





在 这 个 应 用 中 , 容器 型 组 件 就 是 那些 和 store 交 互 的 组 件 。 这 表示 容器 型 组 件 符合 下 列 三 种 特征 : 
(1) 从 store 中 读 取 数据 ; 

(2) 订阅 store 的 变化 ; 

(3) 向 store 中 分 发 action 。 


这 里 的 三 个 主要 组 件 都 是 容器 型 组 件 ， 而 它们 所 包含 的 组 件 都 是 展示 型 的 〈 也 就 是 功能 性 的 / 
纯粹 的 /不 和 store 交 互 的 )。 


接 下 来 构建 第 一 个 容器 型 组 件 : 导航 条 。 








13.7 ”构建 ChatNavBar 
导航 条 中 要 显示 当前 用 户 的 未 读 消 息 数 ， 如 图 13-8 所 示 。 








ng-book 2 Messages © 


E Echo Rot e 








图 13-8 ChatNavBar 组 件 中 的 未 读数 


Q、 试验 未 读 消息 数量 最 好 的 办 法 是 使 用 等 待机 器 人 (Waiting Bot )。 如 何 你 还 没有 
试 过 ， 尝 试 发 消息 “3” 给 等 待机 器 人 ， 然 后 切换 到 其 他 聊天 窗口 。 等 待机 器 人 
会 等 3 秒 再 给 你 回复 消息 ， 这 样 你 就 会 看 到 未 读 消息 数量 的 增长 。 


先 来 看 看 组 件 代码 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatNavBar.ts 


GComponent( { 
selector: 'chat-nav-bar', 
template: ^ 
«nav class-"navbar navbar-default"'» 
«div class-"container-fluid"» 
«div class-"navbar-header"» 
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«a class-"navbar-brand" hrefz"https://ng-book.com/2"» 
«img src-"$(require('images/1ogos/ng-book-2-minibook.png')]"/» 
ng-book 2 
«/a» 
«/div» 
«p class-"navbar-text navbar-right"» 
«button class="btn btn-primary" type-z"button"'» 
Messages «span class-"badge"»[[ unreadMessagesCount j)«/span» 
«/button» 
</p> 
</div> 
</nav> 


D) 


export default class ChatNavBar { 
unreadMessagesCount: number; 


constructor(GInject(AppStore) private store: Store«AppState») { 
Store.subscribe(() => this.updateState()); 
this.updateState(); 

j 


updateState() { 
this.unreadMessagesCount - getUnreadMessagesCount(this.store.getState()); 


j 
】 


模板 为 我 们 提供 了 DOM 结 构 和 演 染 导航 条 所 需 的 CSS( 这 些 CSS 类 来 自 CSS 框 架 Bootstrap )。 


























在 这 个 模板 中 ， 我 们 唯一 要 显示 的 变量 是 unreadMessagesCount。 

ChatNavBar 组 件 中 的 unreadMessagesCount 是 一 个 实例 变量 。 它 会 被 设置 成 所 有 会 话 的 未 读 
消息 总 数 。 

注意 ， 我 们 在 constructor 中 做 了 三 件 事 : 

(1) 注入 了 store; 

(2) 订阅 了 store 中 的 任何 变化 ; 

(3) 调用 了 this .updatesState( )。 

我 们 在 subscribe 后 调用 了 this.updateState() ， 因 为 要 确保 组 件 使 用 最 新 数据 进行 初始 
化 。subscribe 只 会 在 组 件 初始 化 之 后 state 数 据 发 生变 化 的 时 候 调 用 。 


updateState() 是 最 有 意思 的 函数 一 一 我 们 把 unreadMessagesCount 设 置 为 getUnread- 
MessagesCount 了 负数 的 返回 值 。getUnreadMessagesCount 是 什么 ” 它 从 哪里 来 ? 






























































getUnreadMessagesCount 是 一 个 名 叫 选择 器 ( selector ) 的 新 概念 。 
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13.7.4 Redux 选择 器 
思考 一 下 AppState ， 我 们 该 如 何 获取 未 读 消 息 总 数 呢 ? 像 下 面 这 样 如 何 : 


// get the state 
let state - this.store.getState(); 





// get the threads state 
let threadsState - state.threads; 


// get the entities from the threads 
let threadsEntities - threadsState.entities; 


// get all of the threads from state 
let allThreads - Object.keys(threadsEntities) 
.map((threadId) => entities[threadId]); 








// iterate over all threads and ... 
let unreadCount - allThreads.reduce( 
(unreadCount: number, thread: Thread) => { 
// foreach message in that thread 
thread.messages.forEach((message: Message) => { 
if (!message.isRead) { 
// if it's unread, increment unread count 
-runreadCount; 
j 
135 
return unreadCount; 
F; 
0); 


我 们 应 该 把 这 段 逻辑 放 在 ChatNavBar 组 件 中 吗 ? 如 果 这 人 么 做 的 话 ， 会 有 如 下 两 个 问题 


(1) 这 一 大 块 代码 深 深 地 渗透 到 了 Appstate 中 。 更 好 的 方法 是 把 这 段 逻 辑 移 到 所 涉及 的 state 
之 后 。 


(D) 如 果 应 用 的 其 他 地 方 需要 显示 未 读 消息 总 数 呢 ?如何 共享 这 段 逻 辑 ? 
选择 器 背后 的 思想 可 用 来 解决 这 些 问题 : 























选择 器 是 函数 ， 它 接收 部 分 state 并 返回 一 个 值 。 
我 们 来 看 看 如 何 创 建 选择 器 。 
13.7.2 ”会话 选择 器 
先 从 简单 的 部 分 开始 。 假 设 我 们 要 在 AppState 中 获取 ThreadsState。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 
export const getThreadsState - (state): ThreadsState -» state.threads; 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


13.7 构建 ChatNavBar 335 


























相当 简单 ,对 不 对 ” 只 要 给 定 了 顶层 的 AppState, 就 可 以 通过 state.threads 找 到 Threads- 
State。 


如 果 我 们 要 获取 当前 会 话 ， 可 以 这 样 做 : 


const getCurrentThread = (state: AppState): Thread => { 
let currentThreadId - state.threads.currentThreadId; 
return state.threads.entities[currentThreadId]; 


} 


对 于 这 个 小 例子 来 说 , 这 样 的 选择 器 就 可 以 胜任 。 值 得 考虑 的 是 ， 如 何 随 着 应 用 的 增长 让 选 
择 器 更 具 可 维护 性 。 如 果 能 用 选择 器 来 查询 其 他 选择 器 就 好 了 。 如 果 一 个 选择 器 能 指定 多 个 其 他 
选择 器 作为 自己 的 依赖 就 更 好 了 。 

这 些 正 是 reselect" 类 库 提供 的 。 利 用 reselect ， 我 们 可 以 创建 更 小 、 更 专注 的 选择 器 ， 还 
能 结合 它们 实现 更 大 的 功能 。 


下 面 来 看 看 如 何 使 用 reselect 提 供 的 createSelector 方 法 获取 当前 会 话 。 





























code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const getThreadsEntities - createSelector( 
getThreadsState, 
( state: ThreadsState ) -» state.entities ); 
先 来 写 一 个 getThreadsEntities 选 择 需 。 getThreadsEntities 使 用 createSelector 并 传人 
两 个 参数 : 
(1) 之 前 定义 的 选择 需 getThreadsState ; 
(2) 一 个 回调 函数 ， 用 于 接收 getThreadsState 选 择 器 的 返回 值 ， 并 返回 我 们 要 选取 的 值 。 


这 里 只 获取 了 state.entities ， 看 起 来 似乎 有 点 浪费 ， 但 它 为 我 们 建立 了 可 维护 性 更 强 的 
选择 器 。 现在 看 看 如 何 用 createSelector 创 建 getCurrentThread。 




















code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const getCurrentThread = createSelector( 
getThreadsEntities, 
getThreadsState, 
( entities: ThreadsEntities, state: ThreadsState ) => 
entities[state.currentThreadId] ); 


i 
ET 


意 , 这 里 引用 了 两 个 选择 器 作为 依赖 : getThreadsEntities 和 getThreadsState。 这 些 选 
择 需 被 解析 后 就 会 变 成 回调 函数 的 参数 。 我 们 可 以 把 它们 组 合 起 来 返回 当前 选中 的 会 话 。 








(D https://github.com/reactjs/reselect//createselectorinputselectors--inputselectors-resultfunc 
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13.7.3 未 读 ; 肖 息 总 数 选 先 择 器 


现在 我 们 已 经 理解 了 选择 器 的 工作 原理 ， 接 着 就 来 创建 一 个 选择 器 以 获取 未 读 消息 的 数量 。 
如 果 看 过 前 面 获取 未 读 消息 总 数 的 首次 尝试 , 你 会 发 现 每 个 变量 都 可 以 被 替换 成 它们 自己 的 选择 
器 (getThreadsState、getThreadsEntities 等 ), 


下 面 是 用 来 获取 所 有 Thread 的 选择 需 。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const getAllThreads - createSelector( 
getThreadsEntities, 
( entities: ThreadsEntities ) => Object.keys(entities) 
.map((threadId) => entities[threadId])); 


拿 到 所 有 会 话 之 后 ， 我 们 就 可 以 知道 所 有 会 话 中 的 未 读 消 息 总 数 。 


code/redux/angular2-redux-chat/app/ts/reducers/ThreadsReducer.ts 


export const getUnreadMessagesCount - createSelector( 
getAllThreads, 
( threads: Thread[] ) => threads.reduce( 
(unreadCount: number, thread: Thread) => { 
thread.messages.forEach((message: Message) => { 
if (!message.isRead) { 
++unreadCount ; 
j 
2); 
return unreadCount; 
ji 
0)); 


有 了 这 个 选择 器 ， 我 们 就 可 以 在 chatNavBar 组 件 中 (以 及 应 用 中 任何 需要 的 地 方 ) 获取 到 
未 读 消息 的 数量 。 























13.8 构建 ChatThreads 组 件 
接 下 来 在 ChatThreads 组 件 中 构建 会 话 列 表 ， 如 图 13-9 所 示 。 


Echo Bot * 
l'Il echo whatever you send me 
Reverse Bot 

r I'll reverse whatever you send me 
Waiting Bot 
l'Il wait however many seconds you send 
to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the 
friend which you weep for. 


图 13-9 ”按时 间 排 序 的 会 话 列表 
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13.8.1 ChatThreads 控制 器 
在 查看 ChatThreads 组 件 的 模板 之 前 ， 我 们 先 来 看 看 组 件 的 控制 器 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatThreads.ts 


export default class ChatThreads { 
threads: Thread[]; 
currentThreadId: string; 


constructor(GInject(AppStore) private store: Store«AppState») { 
store.subscribe(() => this.updateState()); 
this.updateState(); 

j 


updateState() { 
let state - this.store.getState(); 


// Store the threads list 
this.threads - getAllThreads(state); 


// We want to mark the current thread as selected, 

// so we store the currentThreadId as a value 

this.currentThreadId - getCurrentThread(state).id; 
} 


handleThreadClicked(thread: Thread) { 
this.store.dispatch(ThreadActions.selectThread(thread)); 
j 
j 


在 这 个 组 件 中 存储 了 两 个 实例 变量 。 


口 threads: Zt. 
O currentThreadId: 用 户 正在 操作 的 当前 会 话 。 





TEconstructor 中 保存 了 一 个 Redux store 的 引用 并 订阅 更 新 。 一 旦 store 发 生变 化 ， 就 调用 





updateState(), 





updateState( ) 会 保持 实例 变量 与 Redux store 同 步 。 注 意 我 们 正在 用 的 这 两 个 选择 器 : 


DQ getAllThreads 
DQ getCurrentThread 


这 样 就 可 以 保持 它们 各 自 的 实例 变量 总 是 最 新 的 。 











这 里 引入 了 一 个 新 概念 : 事件 处 理 器 handleThreadClicked。handleThreadClickeq 会 


selectThread 这 个 action。 当 点 击 一 个 会 话 时 ， 我 们 就 告诉 store 把 这 个 新 会 话 设 为 所 选 会 
应 用 的 其 余部 分 也 应 该 依次 更 新 。 
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13.8.2 ChatThreads 的 template 


我 们 来 看 一 下 ChatThreads 组 件 的 template 及 其 配置 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatThreads.ts 


*/ 
GComponent( f 
selector: 'chat-threads', 
template: ^ 
«1-- conversations --» 


«div class="row"> 
«div classz"conversation-wrap"» 
«chat-thread 
*xngFor-"let thread of threads" 
[thread]-"thread" 


[selected]-"thread.id === currentThreadId" 


(onThreadSelected)-"handleThreadClicked($event)"» 


«/chat-thread» 
«/div» 
«/div» 





我 们 在 模板 中 使 用 ngFor 来 遍历 threads 。 我 们 还 用 了 一 个 叫 作 chatThread 的 新 组 件 来 演 染 


单个 会 话 。 

















ChatThread 是 一 个 展示 型 组 件 。 在 chatThread 中 ， 我 们 既 不 能 
和 分 发 action。 反 之 , 我 们 要 通过 inputs (输入 参数 ) 来 传人 该 组 件 





(输出 参数 ) 来 处 理 任何 交互 。 








接着 我 们 会 介绍 chatThread 的 实现 ， 但 先 来 看 看 这 个 模板 中 的 输入 和 输出 。 





口 使 用 单个 thread 变 量 作为 输入 属性 [thread] ; 








前 会 话 ( currentThreadId ); 





我 们 再 来 研究 一 下 chatThread 组 件 。 


13.9 ”单个 ChatThread 组 件 


ChatThread 组 件 用 来 显示 会 话 列表 中 一 个 单独 的 会 
只 会 操作 直接 给 它 的 那些 数据 。 











口 对 于 输入 属性 [selected] , 我 们 传人 一 个 布尔 值 来 表明 这 个 会 话 (thread.id ) 是 





因为 它 是 一 个 展示 型 组 件 ， 所 以 我 们 将 它 放 在 app/ts/components 文 件 夹 中 。 
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吏 用 store ， 也 不 能 读 取 数 据 
所 需 的 一 切 ， 并 通过 outputs 





否 是 当 


口 如 果 会 话 被 点 击 ， 就 发 出 输出 事件 (onThreadSelected)。 这 时 就 会 调用 handleThread- 
Clicked( )〔 它 会 向 store 中 分 发 选择 会 话 的 事件 )。 


话 。 记 住 ChatThread 是 展示 型 组 件 ， 它 
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下 面 是 组 件 控制 器 的 代码 。 


code/redux/angular2-redux-chat/app/ts/components/ChatThread.ts 


export default class ChatThread { 
thread: Thread; 
selected: boolean; 
onThreadSelected: EventEmitter«Thread»; 


constructor() { 
this.onThreadSelected - new EventEmitter«Thread»(); 


j 


clicked(event: any): void { 
this.onThreadSelected.emit(this.thread); 
event.preventDefault(); 
j 
} 
这 里 的 看 点 是 onThreadSelected 这 个 EventEmitter。 如 果 你 还 没 怎么 用 过 EventEmitter ， 
可 以 把 它 当 作 观 察 者 模式 的 一 种 实现 。 我 们 把 它 作为 这 个 组 件 的 “输出 通道 ” 想 发 送 数据 时 
ti 调 用 onThreadqSelected .emit 方 法 ， 把 想 要 发 送 的 数据 传 进去 。 
在 这 个 例子 中 ， 我 们 想 把 当前 会 话 作 为 参数 传 给 EventEmitter 。 当 点 击 这 个 元 素 时 ， 我 们 
就 会 调用 onThreadSelected.emit(this.thread) ， 它 会 触发 父 级 组 件 (ChatThreads ) 中 的 回 























&ur 











ChatThread BJeComponent 和 template 














下 面 是 ecomponent 注 解 和 template 的 代码 。 


code/redux/angular2-redux-chat/app/ts/components/ChatThread.ts 


GComponent ( f 
inputs: ['thread', 'selected'], 
selector: 'chat-thread', 
outputs: ['onThreadSelected'], 
template: ^ 
«div Class= "media conversation"» 
«div class-"pull-left"» 
«img class-"media-object avatar" 
src-"[[thread.avatarSrc]]"» 
«/div» 
«div class-z"media-body"» 
«h5 class-"media-heading contact-name"»[Í[thread.name]] 
«span xngIf-z"selected"»&bull;«/span» 
«/h5» 
«small class-z"message-preview"» 
((thread.messages[thread.messages.length - 1] .text}} 
«/small» 
«/div» 
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«a (click)="clicked($event)" class-"div-link"»Select«/a» 
«/div» 


























这 里 把 thread 和 selected 指 定 为 inputs 属 性 ， 把 onThreadSelected 指 定 为 outputs 属 性 。 

注意 ,视图 中 使 用 了 一 些 直接 的 绑 定 ， 比如 { {thread.avatarSrc}} 和 {{thread.name}}。 在 
class 为 message-preview 的 标签 中 有 如 下 代码 : 

{{ thread.messages[thread.messages.length - 1].text }} 

它 会 获取 会 话 中 的 最 后 一 条 消息 并 显示 消息 的 文本 ， 目 的 是 在 每 个 会 话 中 显示 最 新 消息 的 
预览 。 

我 们 还 用 了 #*ngIf， 会 对 选中 的 会 话 显示 &bul1 ;符号 。 

最 后 ,我 们 绑 定 了 (click) 事 件 来 调用 clicked( ) 处 理 器 。 注 意 ,我们 在 调用 clicked 时 传人 


了 参数 $event 。 这 是 Angular 提 供 的 一 个 用 来 描述 事件 的 特殊 变量 。 我 们 通过 在 clicked 处 理 器 中 
调用 event .preventDefault() ;来 使 用 它 。 这 样 可 以 确保 我 们 不 会 跳 转 到 其 他 页 面 。 



































13.10 ”构建 chatwindow 组 件 


Chatwindow 是 这 个 应 用 中 最 复杂 的 组 件 ( 如 图 13-10 所 示 )。 我 们 一 步 一 步 来 完成 它 。 


Vi Chat - Reverse Bot 
I'll reverse whatever you send me n 








图 13-10 ”聊天 窗口 














Chatwindow 类 有 三 个 属性 : currentThread ( 其 中 包括 messages ), draftMessage 和 


currentUser,» 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


export default class ChatWindow { 
currentThread: Thread; 
draftMessage: { text: string }; 
currentUser: User; 
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图 13-11 表 明了 每 一 个 属性 在 何 处 使 用 。 


uMen THe 
| 一 n messages 





currentUser 








draftMessage 











图 13-11 ”聊天 窗口 的 属性 
我 们 在 constructor 中 注入 了 两 样 东 西 。 














code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


constructor(@Inject(AppStore) private store: Store«AppState», 
private el: ElementRef) { 
store.subscribe(() => this.updateState() ); 
this.updateState(); 
this.draftMessage = { text: '' }; 
j 


第 一 个 是 Redux store， 第 二 个 是 el。el 是 一 个 ElementRef ， 可 以 用 来 获取 宿主 DOM 元 素 。 
当 创 建 和 接收 新 消息 的 时 候 ， 我 们 会 借助 它 来 让 聊天 窗口 滚动 到 底部 。 
我 们 在 构造 函数 中 订阅 了 store， 就 像 在 其 他 容器 型 组 件 中 所 做 的 那样 。 


接着 要 做 的 是 设置 一 个 默认 的 draftMessage， 它 的 text 属 性 是 一 个 空 字符 串 。 我 们 会 使 用 
draftMessage 来 记录 用 户 在 输入 框 中 输入 的 消息 。 


















































13.10.1 ChatWindow 的 updateState() 
当 store 改 变 时 ， 我 们 会 更 新 该 组 件 的 实例 变量 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 





updateState() { 
let state = this.store.getState(); 
this.currentThread - getCurrentThread(state); 
this.currentUser - getCurrentUser(state); 
this.scrollToBottom(); 

j 


我 们 存储 了 当前 会 话 和 当前 用 户 。 如 果 来 了 新 消息 , 我 们 希望 滚动 到 窗口 的 底部 。 在 这 里 调 
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用 scrollToBottom 有 点 粗粮， 但 这 种 简单 的 方法 可 以 保证 在 有 新 消息 时 《〈 或 用 户 切 换 到 一 个 新 
会 话 中 时 ) 用 户 不 需要 每 次 都 手动 滚动 窗口 。 





13.10.2 ChatWindow 的 scrollToBottom() 


为 了 深 动 到 聊天 窗口 的 底部 ， 我 们 将 使 用 保存 在 构造 函数 中 的 类 型 为 ElementRef 的 el。 要 
让 这 个 元 素 滚动 ， 就 要 设置 宿主 元 素 的 scrol1Top 属 性 。 

















code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


scrollToBottom(): void { 
let scrollPane: any = this.el 
.nativeElement.querySelector('.msg-container-base'); 
if (scrollPane) ( 
setTimeout(() => scrollPane.scrollTop = scrollPane.scrollHeight); 


} 
} 


o 为 什么 使 用 setTimeout? 
如 果 我 们 得 到 新 消息 时 立即 调用 scroll1ToBottom， 那么 滚动 到 底部 的 动作 就 是 
在 新 消息 泻 染 完成 之 前 执行 的 。 使 用 setTimeout 可 以 告诉 JavaScript 我 们 要 在 当 
前 执行 队列 完成 后 再 运行 这 个 函数 。 该 函数 会 在 组 件 泻 染 完 成 之 后 执行 ， 这 正 
是 我 们 想 要 的 效果 。 


13.10.3 ChatWindow 的 sendMessage 
如 果 我 们 要 发 送 一 条 新 消息 ， 就 要 先 拿 到 : 

a 当前 会 话 

a 当前 用 户 

Q 草稿 消息 的 文本 


然后 向 store 中 分 发 一 个 新 的 addMessage action。 下 面 是 其 代码 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 











sendMessage(): void { 
this.store.dispatch(ThreadActions.addMessage( 
this.currentThread, 
( 
author: this.currentUser, 
isRead: true, 
text: this.draftMessage.text 
j 
); 
this.draftMessage = { text: '' }; 
j 
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sendMessage 函 数 接收 draftMessage 人 参数 并 用 组 件 的 属性 来 设置 author 和 thread。 每 条 已 发 
送 的 信息 其 实 都 已 经 被 读 过 了 ( 因为 是 我 们 写 的 )， 所 以 将 其 标记 为 已 读 。 

分 发 这 条 消息 之 后 ， 创 建 一 个 新 的 Message 对 象 并 把 它 赋 给 this.draftMessage。 这 会 清空 
输入 框 。 创 建 一 个 新 对 象 可 以 确保 我 们 不 会 改变 已 经 发 送 给 store 的 消息 。 




















13.10.4 ChatWindow 的 onEnter 
在 视图 中 ， 我 们 希望 在 下 面 两 种 场景 发 送 消息 : 
(1) 用 户 点 击 Send 按 钮 ; 
(2) HIP iati In] AE SEE 
我 们 定义 一 个 函数 来 处 理 这 两 种 事件 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 











onEnter(event: any): void { 
this.sendMessage(); 
event.preventDefault(); 


j 


我 们 创建 onEnter 事 件 处 理 器 并 把 sendMessage 作 为 一 个 单独 的 函数 , 这 是 因为 
onEnter 要 接收 一 个 参数 event 并 调用 event .preventDefault()。 这 种 方式 下 我 
们 还 可 以 在 响应 浏览 器 事件 之 外 的 场景 下 调用 sendMessage。 在 这 个 例子 中 ， 
我 们 并 没有 真 的 在 其 他 场景 下 调用 sendMessage ， 但 我 发 现 把 “真正 干 活 的 ” 
函数 从 事件 处 理 器 中 独立 出 来 会 更 好 。 

否则 ，sendMessage 函 数 就 会 : (1) 要 求 必须 传 入 一 个 事件 对 象 ; (2) 处 理 该 事件 
对 象 。 但 是 这 样 一 来 它 的 关注 点 就 太 多 了 。 


现在 已 经 处 理 好 了 控制 器 的 代码 ， 让 我 们 来 看 看 template。 





13.10.5 ChatWindow 的 template 
我 们 先 从 面板 (panel) 的 起 始 标签 开始 ， 并 且 在 头 部 显示 聊天 的 名 称 。 





code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


GComponent ( f 
selector: 'chat-window', 
template: ^ 
«div classz"chat-window-container"» 
«div classz"chat-window"» 
«div classz"panel-container"» 
«div class="panel panel-default"» 
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«div class="panel-heading top-bar"» 
«div classz"panel-title-container"» 
«h3 class-"panel-title"» 
«span class-"glyphicon glyphicon-comment"»«/span» 
Chat - [(currentThread.name]] 
«/h3» 
«/div» 
«div classz"panel-buttons-container" > 
«1-- you could put minimize or close buttons here --» 
«/div» 
«/div» 


«div class-"panel-body msg-container-base"» 


接 下 来 显示 消息 列表 。 这 里 用 ngFor 遍 历 消息 列表 。 我 们 稍 后 会 讲解 单个 chat-message 组 件 。 

















code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


<chat-message 
xngFor="let message of currentThread.messages" 
[message]="message"> 
«/chat-message» 
«/div» 


«div class-"panel-footer"» 
最 后 是 消息 输入 框 和 各 个 结束 标签 。 


code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 











«div class="input-group"> 
«input type="text" 
classz"chat-input" 
placeholder-"Write your message here..." 
(keydown.enter)-"onEnter($event)" 
[(ngModel)]2"draftMessage.text" /> 
«span classz"input-group-btn"» 

«button classz"btn-chat" 
(click)z"onEnter($event)" 
»Send«/button» 

«/span» 
«/div» 
«/div» 


«/div» 
«/div» 
«/div» 
«/div» 


}) 
export default class ChatWindow { 


消息 输入 框 是 视图 中 最 有 意思 的 部 分 ， 我 们 来 看 看 其 中 两 个 有 趣 的 属性 : (keydown .enter) 
和 [(ngModel)] 。 
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13.10.6 ”处 理 键盘 动作 


Angular 提 供 了 一 种 简明 的 方式 来 处 理 键盘 动作 : 在 元 素 上 绑 定 事件 。 在 这 个 例子 中 ， 我 们 
绑 定 了 keydown.enter 。 这 表示 如 果 用 户 按 下 回 车 键 ， 就 会 调用 表达 式 里 的 郴 数 onEnter 
($event ) 。 

















code/redux/angular2-redux-chat/app/ts/containers/ChatWindow.ts 


classz"chat-input" 
placeholder-z"Write your message here..." 
(keydown.enter)-z"onEnter($event)" 
[(ngModel)]2"draftMessage.text" /> 

«span class-"input-group-btn"» 


13.10.7 使 用 ngModel 

如 前 所 述 ，Angular 并 没有 像 AngularJS 那 样 把 双向 绑 定 作为 数据 架构 的 核心 。 特 别 是 当 我 们 
使 用 Redux 的 时 候 ， 它 是 完全 的 单 向 数据 流 。 

然而 在 组 件 及 其 视图 之 间 进 行 双向 绑 定 是 非常 有 用 的 。 只 要 把 双向 绑 定 的 坏处 限制 在 组 件 之 
中 ， 保 持 组 件 属 性 和 视图 的 同步 是 很 方便 的 。 

对 于 这 个 例子 ,我 们 在 输入 框 的 值 和 qdqraftMessage.text 之 间 建 立 了 一 个 双向 绑 定 。 如 果 在 
输入 框 中 输入 文字 ，draftMessage.text 就 会 自动 设置 为 输入 的 文字 。 同 样 ， 如 果 在 代码 中 更 新 
draftMessage.text， 那 么 视图 中 输入 框 的 值 也 会 随 之 改变 。 






























































13.10.8 ”点 击 Send 按钮 
在 Send 按 钮 上 将 (click) 属 性 绑 定 到 组 件 中 的 onEnter 范 数 。 








code/redux/angular2-redux-chat/app/ts/containers/ChatWindovw.ts 


(click)z2"onEnter($event)" 
»Send«/button» 
«/span» 


我 们 使 用 同一 个 onEnter 函 数 来 处 理 本 事件 。 也 就 是 说 ， 点 击 这 个 按钮 和 按 回 车 键 都 可 以 发 
送 消 息 。 























13.11 ChatMessage 组 件 














我 们 没有 把 泻 染 单个 消息 的 代码 都 放 到 chatwindow 组 件 中 ， 而 是 创建 了 另 一 个 展示 型 组 件 
ChatMessage。 
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Qs 提示 : 如 果 你 发 现 自己 正在 使 用 ngFor ， 那 就 表示 你 该 创建 一 个 新 组 件 了 。 





每 条 消息 都 是 通过 ChatMessage 组 件 泻 染 的 ， 如 图 13-12 所 示 。 





Vi Chat - Reverse Bot 


I'll reverse whatever you send me 


| Write yourn message 


ChatMessage 





图 13-12 ”ChatMessage 组 件 


该 组 件 相对 简明 ， 其 主要 逻辑 是 根据 消息 是 否 由 当前 用 户 所 创建 来 泻 当 出 略 有 不 同 的 视 网 。 
如 果 该 消息 不 是 当前 用 户 创建 的 ， 就 认为 消息 是 收 到 的 ( incoming)。 























13.11.1 设置 incoming 属性 





记 住 ， 每 个 chatMessage 组 件 都 属于 一 条 Message 。 因 此 ， 要 在 ngonInit 方 法 里 订阅 
currentUser 流 并 根据 这 条 Message 是 否 由 当前 用 户 创建 来 设置 incoming。 

















code/redux/angular2-redux-chat/app/ts/components/ChatMessage.ts 


export default class ChatMessage implements OnInit { 
message: Message; 
incoming: boolean; 


ngOnInit(): void { 
this.incoming - !this.message.author.isClient; 
j 
j 


13.11.2 ChatMessage B template 
在 template 中 有 两 点 值得 注意 : 


(1) FromNowPipe 管 道 








(2) [ngclass] 属性 
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先 来 看 其 代码 。 
code/redux/angular2-redux-chat/app/ts/components/ChatMessage.ts 
*/ 
@Component( { 

inputs: ['message'], 

selector: 'chat-message', 

template: ` 

<div class="msg-container" 

[ngClass]="{'base-sent': !incoming, 'base-receive': incoming}"> 


<div class="avatar" 
xngIf="!incoming"> 
<img src-"[í(message.author.avatarSrc]]"» 
</div> 


<div class="messages" 

[ngClass]="{'msg-sent': !incoming, 'msg-receive': incoming]"» 

«p» ((message.text]]«/p» 

«p class-"time"»[[message.sender]) e [([message.sentAt | fromNow]]«/p» 
«/div» 


«div class-"avatar" 
*nglf-z"incoming"» 
«img src-"[í(message.author.avatarSrc]]"» 
«/div» 
«/div» 








FromNowPipe 是 一 个 管道 , 把 消息 的 发 送 时 间 转 换 为 像 “x 秒 前 ”这 样 对 用 户 友 好 的 信息 。 如 
你 所 见 ， 我 们 要 这 样 使 用 它 : {{message.sentAt | fromNow}}。 











o FromNowPipe 使 用 优秀 的 moment .js 类 库 。 如 果 你 想 学 习 如 何 创 建 自 定义 管道 ， 
可 以 阅读 FromNowPipe 的 源 代 码 : code/rxjs/chat/app/ts/util/FromNowPipe.ts.. 
我 们 也 在 视图 中 充分 利用 了 ngclass。 当 这 样 写 时 : 
[ngClass]-"('msg-sent': !incoming, 'msg-receive': incoming)" 
我 们 是 在 告诉 Angular: 如 果 incoming 为 真 就 使 用 msg-receive 类 ( 否则 使 用 msg-sent 类 )。 
借助 incoming 属 性 ， 我 们 就 能 以 不 同 的 形式 来 显示 收 到 和 发 出 的 消息 。 
































13.12 总结 
好 了 ， 把 它们 全 部 放 在 一 起 ， 就 是 一 个 完整 的 聊天 应 用 了 如 图 13-13 所 示 )! 








(D http://momentjs.com/ 
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9 © O / [s angular 2 -Chat win RxJS x \ | Blank 
€ > CŒ |D localhost:3080 i zolz 
Messages Q 





ng-book 2 


Echo Bot + 
ll echo whatever you send me 
Reverse Bot 

"reverse whatever you send me 


Waiting Bot 
Ll wait however many seconds you send to me before responding. Try sending '3' 


Lady Capulet 
So shall you feel the loss, but not the friend which you weep for. 


Wi Chat - Echo Bot 


I'll echo whatever you n 
send me 





DM | 








图 13-13 ”完成 后 的 聊天 应 用 


查看 文件 code/redux/angular2-redux-chat/app/ts/ChatExampleData.ts, 你 会 发 现 我 们 已 经 写 好 了 
少量 可 以 跟 你 聊天 的 机 器 人 。 检 出 这 些 代 码 并 试 着 写 几 个 自己 的 机 器 人 吧 ! 
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高 级 组 件 








在 本 书 中 ,我 们 已 经 学 习 了 如 何 使 用 Angular 的 内 置 指令 以 及 如 何 创建 组 件 。 本 章 将 深入 探 
讨 用 于 开发 组 件 的 高 级 Angular 特 性 。 


我 们 将 在 本 章 中 学 习 以 下 内 容 : 


口 组 件 样 式 封 装 

口 修改 宿主 DOM 元 素 

口 使 用 内 容 投 影 修改 模板 
口 访问 邻近 的 指令 

口 使 用 生命 周期 钩子 

口 变更 检测 








14.4 样式 


Angular 提 供 了 一 套用 来 指定 “组 件 级 ”样式 的 机 制 。 尽管 CSS 的 意思 是 层 登 样式 表 ( cascading 
style sheet )， 但 有 时 候 我 们 并 不 想 要 “ 层 苹 ”效果 。 我 们 可 能 只 想 为 某 个 特定 的 组 件 提 供 样 式 ， 
而 不 要 影响 到 页 面 的 其 他 部 分 。 
Angular 为 组 件 提 供 了 两 个 属性 来 定义 CSS 类 。 
为 了 定义 组 件 样 式 , 我 们 使 用 视图 属性 styles 来 定义 内 联 样式 或 者 借助 styleurls 属 性 来 使 
用 外 部 CSS 文 件 ， 还 可 以 在 组 件 的 装饰 器 中 直接 定义 这 些 属性 。 
我 们 来 创建 一 个 使 用 内 联 样 式 的 组 件 。 om 


code/advanced components/app/ts/styling/styling.ts 


























GComponent ( f 
selector: 'inline-style', 
styles: [^ 
.highlight { 
border: 2px solid red; 
background-color: yellow; 
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text-align: center; 
margin-bottom: 20px; 

j 

za 

template: ^ 

«h4 class-"ui horizontal divider header"» 
Inline style example 

«/h4» 


«div class-"highlight"» 
This uses component «code»styles«/code» 
property 

«/div» 


}) 


class InlineStyle { 
} 


在 这 个 示例 中 ,我 们 在 styles 数 组 参数 中 声明 了 CSS 类 .highlight , 它 定义 了 我 们 要 用 的 样式 。 
然后 在 模板 中 使 用 cdiv class="highlight"> 引 用 这 个 类 。 
最 后 的 结果 与 我 们 预期 的 一 样 : 一 个 红色 边框 、 黄 色 背 景 的 div ( 如 图 14-1 所 示 )。 


























Inline style example 


This uses component styles property 


图 14-1 使 用 styles 属 性 的 组 件 示 例 




















另 一 种 声明 CSS 类 的 方法 是 使 用 styleUurls 属 性 。 它 可 以 让 我 们 从 外 部 文件 中 定义 CSS 并 在 
组 件 中 直接 引用 它们 。 
在 用 这 种 方式 创建 另 一 个 组 件 之 前 ， 创 建 一 个 名 为 extermal.css 的 文件 ， 它 包含 下 面 这 些 类 。 





code/advanced components/app'/ts/styling/external.css 


.highlight { 
border: 2px dotted red; 
text-align: center; 
margin-bottom: 20px; 

j 


然后 就 可 以 在 组 件 代 码 中 引用 它 。 


code/advanced components/app/ts/styling/styling.ts 





@Component( { 
selector: 'external-style', 
styleUrls: [externalCSSUrl], 
template: ^ 
«h4 class-"ui horizontal divider header"» 
External style example 
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«/h4» 


«div class-"highlight"» 
This uses component «code»styleUrls«/code» 
property 

«/div» 


}) 
class ExternalStyle { 


j 
加 载 页 面 时 ， 就 可 以 看 见 有 虚线 边框 的 giv( 如 图 14-2 所 示 )。 


External style example 


图 14-2 ”使 用 styleUrls 属 性 的 组 件 示 例 











14.1.1 视图 (样式 ) 封装 
这 个 例子 中 有 意思 的 地 方 是 ， 这 两 个 组 件 都 定义 了 名 为 highlight 的 类 ; 尽管 其 属性 是 不 同 
的 ， 但 它们 并 没有 相互 干扰 。 


这 是 因为 Angular 默 认 将 组 件 样式 封装 在 组 件 的 上 下 文中 。 如 果 检 查 页 面 并 展开 cheady> 标签 ， 
可 以 注意 到 Angular 把 我 们 定义 的 样式 注入 到 了 一 个 cstyle> 标 签 之 中 ， 如 图 14-3 所 示 。 






















































O — 9 | Anguar2-ngstyedemo x (—— Felipe. 
c localhost:8080 waj 
9 ngbook2 Angular 2 component styling demo 

Inline style example 
This uses component styles property 
External style example 
RO Elements Console Sources Network Timeline Profiles Resources Security Audits 1059€ 
> stshadow-root (open) | 
v <head> P Styles Computed » 
-title-Angular 2 - ngStyle demo-/title» E 5 
<link rel-"icon" type-"image/png" href-"resources/images/favicon-32x32.png" sizes- 用 持久 
"32x32"> element.style { 
<link rel-"icon" href-"resources/images/favicon.ico"- n 
«script src mode. modules/esG-shin/esG-shim. ja" pt H ie semantic.min.css:ll 
n r -| "></script> ESSE A . . 
it temjs. dis t/s Sid src. ns box-sizing: inherit; 
les/rxis/bundles/Rx.js"--/script» - 
"></script> style { user agent stylesheet 
<!-— Stylesheet --> display: none; 
<link rel="stylesheet" type="text/css" href= rces/vendor/semantic.min.css"» |} 
<link rel="stylesheet" type="text/css" href=" E css" ET 
v<style> Tm 
.highlight[ ngcontent-hve-2] ( html { tic.min.css:ll 
border: 2px solid red; font-size: 14px; 
background-color: yellow; 
text-align: center; yet 
Side > html { semantic.min.css:11 
j Poeton: npe; box-sizing: border-box; 
</style> font-family: sans-serif; 
> <styLe>-</styte> 
| html head -webkit-text-s 





图 14-3 ”注入 后 的 样式 
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你 还 会 注意 到 ， 到 这 个 CSS 类 使 用 了 _ngcontent-hve-2 属 性 来 限定 其 作用 域 : 


.highlight[\_ngcontent-hve-2] { 
border: 2px solid red; 
background-color: yellow; 
text-align: center; 
margin-bottom: 20px; } 





] 
如 果 查 看 cdivy 的 泻 染 结果 , 会 发 现 它 也 添加 了 一 个 _ng-content-hve-2 属 性 , 如 图 14-4 所 示 。 








© S / g anguar2-ngStyiedemo x Felipe 


Œ D locathost:8080 v ES 


Ed ngbook2 Angular 2 component styling demo 


Inline style example 











This uses component styles property 











RO Elements Console Sources Network Timeline Profiles Resources Security Audits ix 
T meronr 
><div class-"ui menu'»..-/div» Styles Computed » 
v «div class-"ui main text container" 
Y «style-sample-app- Filter + 车 分 


w-inline-style _nghost-hve-2> 
<h4 class-"ui horizontal divider header" _ngcontent-hve-2> 
::before 


element.style { 
} 


<style>..</style> 
Inline style example „highlight [_ngcontent-hve-2] { 
^ border:»2px solid Bired; 
background-color: 
yellow; 
vw<div class="highli _ngcontent-hve-2: text-align: center; 
y margin-bottom: 20px; 








This uses component " } 
<code _ngcontent-hve-2>styles</code> div { styles.css:5 
padding: » 3px; 
, Property margin: > 2px; 
</div> 
</inline-style> *, :after, semantic.min.css:11 
> <external-style _nghost-hve-3>..</external-style> :before { 
</style-sample-app> box-sizing: inherit; 
<!-- Our app loads here --> } 





1 </div> 
| html body div.ui.main.text.container style-sample-app inline-style ETE 









div { user agent stylesheet 





图 14-4 注入 后 的 样式 : «divo 的 泻 染 结果 
引用 外 部 样式 文件 时 的 效果 也 是 一 样 的 ， 如 图 14-5 所 示 。 
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e. us) Bi Angular 2 - ngStyle demo x 





» Œ [À localhost:8080 








S ngbook2 Angular 2 component styling demo 


Inline style example 





This uses component styles property 








External style example 





This uses component styleUrls property 





RO Elements Console Sources Network Timeline Profiles Resources Security Audits i x 


<script src-"moge moguieszangu tar¿/punateszangu targ. gev, Js“></script> 
Stylesheet --> Styles Computed » 


'stylesheet" type="text/css" href-"resources/vendor/semantic.min.css"-» 
"stylesheet" type="text/css" href-"styles.css"- Filter tte 
b «styles..-/style» element.style ( 

H 


*, :after, semantic.min.css:11 





























.highlight[ ngcontent-hve-3] { 
border: 2px dotted red; 


text-align: center; ibefore ( 
margin-bottom: 20px; box-sizing: inherit; 
</style> 


style { user agent stylesheet 


< > 
onis display: none; 
<!-- Configure System.js, our module loader 一 > 
> «script».-/script» Inherited from htmt 
«1— Menu Bar --> html ( senantic.min.css:11 


ui menu">.</div> font-size: 14px; 
ui main text container" 
v «style-sample-app- 





v «inline-style  nghost-hve-2- html { semantic.min.css:11 
v «h4 class-"ui horizontal divider header"  ngcontent-hve-2- box-sizing: border-box; 


font-family: 


-ms-text- 








::before 


sans-serif; 











| html head 


图 14-5 ”外 部 样式 


<div> 的 泻 染 结果 如 图 14-6 所 示 。 


9 709 / ouar2-nosyledemo x (0 Felpe 








^ o Œ D localhost:8080 





ngbook2 Angular 2 component styling demo 


Inline style example 





This uses component styles property 








External style example 





This uses component styleUrls property 





ROI Elements Console Sources Network Timeline Profiles Resources Security Audits ix 


<code ngcontent-hve-2»styles-/code- Styles | Computed » 


, Property Filter +++ 
</div> element.style { 
</inline-style> } 


<style>..</style> 
.hightight[_ngcontent-hve-3] { 
border:*2px dotted 国 red; 
text-align: center; 
margin-bottom: 20px; 





This uses component " 
«code | ngcontent-hve-3»styleUrls-/code- 


property div ( Styles.css:5 
i padding:* 3px; 
</div> margin: > 2px; 
</external-style> 
«/style-sample-app- 
«!—- Our app loads here 一 > 
</div> 
«!— Code injected by live-server 一 > 
»«script type-"text/javascript"»..-/script» 
</body> div { user agent stylesheet 
</html> 5 display: block; 


html body di main.text.container styl external-style :Darl lg 





*, :after, semantic.min.css:11 
:before { 
box-sizing: inherit; 











图 14-6 “外 部 样式 : «divo 的 泻 染 结果 
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Angular 允 许 我 们 使 用 encapsulation 属 性 来 更 改 这 种 行为 。 
这 个 属性 可 以 取 下 列 值 之 一 ， 它 们 都 定义 在 viewEncapsulation 枚 举 中 。 


O Emulated (仿真 ): 这 是 默认 选项 ， 它 会 采用 我 们 刚刚 解释 过 的 技术 来 封装 样式 。 
O Native (原生 ): 使 用 这 个 选项 ，Angular 会 采用 Shadow DOM 技 术 ( 下面 会 详细 介绍 )。 
O None (无 ): 使 用 这 个 选项 , Angular 不 会 封装 任何 样式 , 允许 样式 渗透 给 页 面 的 其 他 元 素 。 


























14.1.2. Shadow DOM 封装 





你 可 能 会 问 : Shadow DOM 有 什么 用 呢 ? HP dM DOM， 组 件 会 生成 一 棵 独一无二 
的 DOM 树 ， 而 这 棵 DOM 树 对 于 页 面 中 的 其 他 元 素 是 不 可 见 的 。 这 样 ， 在 这 个 元 素 中 定义 的 样式 
对 页 面 的 其 余部 分 来 说 就 像 不 存在 一 样 。 





要 深入 了 解 Shadow DOM， 请 查阅 Eric Bidelman4$ 5j 45 48 £j http://www.html5rocks. 
com/en/tutorials/webcomponents/shadowdom/。 


我 们 来 创建 男 一 个 使 用 Native 封 装 ( Shadow DOM ) 的 组 件 ， 理 解 它 是 如 何 工 作 的 。 


code/advanced components/app/ts/styling/styling.ts 


@Component( { 

selector: `native-encapsulation`, 

styles: [^ 

.highlight { 
text-align: center; 
border: 2px solid black; 
border-radius: 3px; 
margin-botton: 20px; 

rl 

template: ^ 

«h4 class-"ui horizontal divider header"» 
Native encapsulation example 

«/h4» 


«div class-"highlight"» 
This component uses «code»ViewEncapsulation.Native«/code» 
«/div» 


encapsulation: ViewEncapsulation.Native 


D) 


class NativeEncapsulation { 


} 
在 这 个 例子 中 ， 如 果 查 看 源 代码 ， 会 看 到 如 图 14-7 所 示 的 结果 。 
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O — 9 | Qangusr2-noStyedemo x Fotos 
e localhost:8080 这 三 


ngbook2 Angular 2 component styling demo 


Inline style example 








This uses component styles property 








External style example 
This uses component styleUrls property 
Native encapsulation example 


This component uses ViewEncapsulation.Native 


民 D | Elements Console Sources Network Timeline Profiles Resources Security Audits Hx 





»-external-style "nghost-jev-3-..-/external-style» 


» 
Ses ES 


witshadow-root (open) Filter 学 ò 
v <style> 2 * * 
„highlight 4 element.style { 
text-align: center; } 


border: 2px solid black; 


re H , Ssemantic.min.css;: 
border-radius: 3px; *, after, semantic.min.css:ll 


:before 4 
EVE box-sizing: inherit; 
*h4 class-"ui horizontal divider header > 
a encapsulation example Inherited from div.ui.main.te... 
</h4> 
RE uitata a 
font-family: 
Lato, 'Helvetica 
Neue' , Arial, Helvetica,.. 


This component uses " 
«code» ViewEncapsulation.Native-/code» 
</div> 
> <style>.</style> 
p<style>.</style> 7 
</native-encapsulation> line-heigi 





important; 
















5j 
PEN font-size: 1.14285714rem; 


html! body  div.ui.main.text.container style-sample-app ET 


图 14-7 ”Native 封 装 
#Shadow-root 元 素 里 面 的 一 切 都 被 封装 起 来 了 ， 并 且 和 页 面 的 其 他 部 分 是 完全 隔离 的 。 





14.1.3 不 使 用 封装 


最 后 ， 如 果 我 们 创建 一 个 组 件 并 指定 ViewEncapsulation.None， 那 就 不 会 进行 任何 的 样式 
封装 。 


code/advanced components/app/ts/styling/styling.ts 


@Component({ 

selector: ^no-encapsulation', 

styles: [^ 

.highlight { 
border: 2px dashed red; 
text-align: center; 
margin-bottom: 20px; 

j 

Iy 

template: 

<h4 class="ui horizontal divider header"> 
No encapsulation example 

</h4> 





<div class="highlight"> 
This component uses «code»ViewEncapsulation.None«/code» 
«/div» 
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encapsulation: ViewEncapsulation.None 


}) 


class NoEncapsulation { 


} 
检查 元 素 时 ， 会 看 到 如 图 14-8 所 示 的 结果 。 




















9 — 9 WAnour2-ngstyedemo x |—— Felipe. 
c localhost:8080 = 
== 
Inline style example 
This uses component styles property 
This uses. 
Native encapsulation example 
b erede aet ThiscomponentusesViewEncapsulation.Native | 
No encapsulation example 
This component uses ViewEncapsulation.None j 
R D Elements Console Sources Network Timeline Profiles Resources Security Audits x 
p< e _ngnost-rky-2>..</ 1n tiNne-sty te» 
P«external- style nghost-rky-3»..-/external-style» Styles Computed » 
b «native-encapsulation-..-/native-encapsulation^ : | 
m C + 1+% 
Y<h4 class="ui horizontal divider header"> element. style { 
::before } | 
No encapsulation example *, :after, semantic.min.css:ll | 
" :before { 
:+after box-sizing: inherit; 
</h4> 
v «div. class="highlight"> Inherited from div.ui.main.te... 
This component uses " Lote omni oseki que s: | 
«code»ViewEncapsulation.None-/code» sul. text. container 
</div> font-family: . 
«/no-encapsulation» Lato,'Helvetica ， 
«/style-sample-app» Neue' , Arial, Helvetica,.. 
ifi 
<!-- Our app loads here 一 > nax- width 
700px! important; 
line-height: 1.5 





</div> 

<!-- Code injected by live-server 一 > 

zerrin: + funa-'tavt/isuseerint!. 一 /crrint、 font-size: 1. 14285714ren; 
html body div.ui.main.text.container style-sample-app E n 


图 14-8 不 进行 封装 
可 以 看 到 HTML 中 没有 注入 任何 东西 。 在 页 头 中 可 以 找到 注入 的 style> 标 签 ， 它 跟 我 们 在 
styles 人 参数 中 定义 的 完全 一 样 : 
.highlight [f 
border: 2px dashed red; 


text-align: center; 
margin-bottom: 20px; 


j 
使 用 viewEncapsulation.None 的 缺点 是 ， 因 为 没有 进行 任何 封装 ， 所 以 它 的 样式 会 影响 到 
受到 了 这 个 新 组 


其 他 组 件 。 在 图 13-8 中 可 以 看 到 ， 使 用 viewEncapsulation.Native 的 组 件 已 经 
件 的 样式 的 影响 。 但 有 时 候 这 可 能 恰恰 是 你 想 要 的 。 
你 可 以 注释 掉 StyleSampleApp 模 板 中 的 cno-encapsulation> </no-encapsulation> 


码 来 看 一 看 区 别 。 





这 行 代 
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14.2 创建 popup 指令 : 引用 并 修改 宿主 元 素 
宿主 元 素 是 指令 或 组 件 被 绑 定 到 的 元 素 。 有 时 组 件 可 能 需要 往 它 的 宿主 元 素 上 附加 一 些 标记 


























在 这 个 示例 中 ， 我 们 会 创建 一 个 popup 指 令 。 它 会 往 宿 主 元 素 上 附加 行为 ， 在 宿主 元 素 被 点 
击 时 显示 一 条 信息 。 








Qs 组 件 与 指令 : 两 者 的 区 别 是 什么 ? 

组 件 和 指令 ARES AX R, 但 它们 略 有 不 同 。 
你 或 许 曾 听 说 过 “组 件 就 是 有 视图 的 指令 "。 其 实 这 并 不 完全 正确 。 组 件 自 带 的 
功能 使 它 很 容易 添加 视图 ， 但 指令 同样 也 可 以 有 视图 。 事 实 上 ， 组 件 是 用 指令 
来 实现 的 。 
一 个 很 好 的 例子 就 是 ngIf， 它 根据 条 件 来 渔 染 视图 。 
但 我 们 可 以 使 用 指令 在 没有 模板 的 情况 下 给 元 素 附加 行为 。 
你 可 以 这 样 认 为 : 组 件 就 是 指令 ， 但 组 件 必 须 有 视图 。 指 令 可 以 有 视图 ， 也 可 
以 没有 。 
如 果 你 选择 在 指令 中 泻 染 视图 ( 模板 ) 的 话 ， 可 以 对 该 模板 的 呈现 方式 进行 更 
多 的 控制 。 在 本 章 的 后 面 我 们 会 讨论 如 何 对 模板 进行 控制 。 


14.2.1 popup 指令 的 结构 


现在 来 编写 我 们 的 首 个 指令 。 我 们 希望 在 点 击 一 个 带 有 popup 属 性 的 DOM 元 素 时 , 该 指令 能 
显示 出 一 个 提示 消息 。 这 个 消息 是 通过 该 元 素 的 message 属 性 来 指定 的 。 


我 们 希望 它 看 起 来 如 下 所 示 : 
«element popup message-"Some message"»«/element» 


为 了 让 这 个 组 件 正 常 工作 ， 我 们 还 要 做 一 些 事 


口 接收 来 自 宿主 元 素 的 message 属 性 ; 
Q 当 宿 主 元 素 被 点 击 时 得 到 通知 。 


我 们 这 就 开始 编写 它 。 


code/advanced components/app'/ts/host/steps/host 01.ts 


GDirective(( 
selector: '[popup]' 
I» 
class Popup { 
constructor() { 
console.log('Directive bound'); 

















pum 
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} 
} 


我 们 使 用 Directive 注 解 并 将 selector 参 数 设 置 为 [popup] 。 这 可 以 让 该 指令 绑 定 到 任何 定 
义 了 popup 属 性 的 元 素 。 


现在 来 创建 一 个 应 用 ， 它 包含 一 个 有 popup 属 性 的 元 素 。 


code/advanced components/app/ts/host/steps/host 01.ts 

















GComponent( { 
selector: 'host-sample-app', 
template: ^ 
«div class-"ui message" popup» 
«div class-"header"» 
Learning Directives 
«/div» 


«p» 
This should use our Popup diretive 

«/p» 

«/div» 


I» 
export class HostSampleApp4 { 


} 


运行 这 个 应 用 时 ， 我 们 期 望 Directive bound 消 息 会 被 打印 到 控制 台中 ， 这 表示 我 们 已 经 成 
功 绑 定 了 模板 中 的 第 一 个 cdiv、( 如 图 14-9 所 示 )。 











O9 — € / Anguar2-Hostelement x Felipe. 
| Œ |! localhost:8080 v ERI 
| % ngbook2 Angular 2 component styling demo 
Learning Directives 
This should use our Popup diretive 
RO Elements Console Sources Network Timeline Profiles Resources » HI TER 
G Ww <top frame> v Preserve log 
Live reload enabled. index):79 
» XHR finished loading: GET "http://localhost:8080/app. js". system.src.js:1049 
Directive bound app.ts:9 
Angular 2 is running in the development mode. Call enableProdMode() to angular2.dev.js:354 
enable the production mode. 


图 14-9” 绑 定 到 宿主 元 素 
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14.2.2 使 用 ElementRef 








如 果 我 们 想 对 指令 所 绑 定 的 宿主 元 素 进 行 更 多 控制 ， 可 以 使 用 内 置 的 ElementRef 类 。 
个 类 保存 着 指定 Angular 元 素 的 相关 信息 ， 使 用 它 的 nativeElement 属 性 可 以 获取 原生 的 





Tu i 











为 了 看 到 指令 所 绑 定 的 元 素 ,， 我 们 可 以 在 构造 函数 中 接收 ElementRef 并 把 它 打印 到 控制 台中 。 


code/advanced components/app/ts/host/steps/host_ 02.ts 


@Directive({ 
selector: '[popup]' 
I» 
class Popup { 
constructor( elementRef: ElementRef) { 
console.log( elementRef); 
} 
} 


我 们 还 可 以 往 页 面 中 添加 另 一 个 元 素 , 它 也 使 用 这 
两 个 不 同 的 ElementRef。 





code/advanced components/app/ts/host/steps/host 02.ts 


GComponent ( f 
selector: 'host-sample-app', 
template: ^ 
«div class-z"ui message" popup» 
«div classz"header"» 
Learning Directives 
«/div» 


«p» 

This should use our Popup diretive 
</p> 
</div> 


«i class-"alarm icon" popup»«/i» 


I» 
export class HostSampleApp2 { 


] 
现在 ， 当 运行 应 用 时 ， 可 以 看 到 两 个 不 同 的 ElementRet : 

















这 样 就 可 以 看 见 控制 台中 打印 了 




















一 个 是 div .ui .message， 男 一 个 14 


是 i.alarm.icon。 这 表示 该 指令 已 经 成 功 绑 定 了 两 个 不 同 的 和 宿主 元 素 ， 如 图 14-10 所 示 。 
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[ 
O — /Angular2-Hostelement x 


C localhost:8080 


ON m2 Angular 2 component styling demo 


Learning Directives 
This should use our Popup diretive 


A 





© Y <top frame> 
YELementRef_ 
pb appElement: AppElement 
internalElement: (...) 
> nativeElement: div.ui.message < 和 = 一 一 一 
» proto : ELementRef_ 
Y ElementRef 
> appElement: AppElement 
internalElement: (...) 
> nativeElement: i.alarm.icon A 


P proto : ElementRef 
Angular 2 is running in the development mode. Call enableProdMode() to 


v (Preserve log 








图 14-10 ”两 个 ElementRef 


14.2.3 ” 绑 定 到 host 属性 


我 们 的 下 一 个 目标 是 在 宿主 元 素 被 点 击 时 做 一 些 事 。 





RO Elements Console Sources Network Timeline Profiles Resources 


» 2 


app.ts:9 


angular2.dev.js:354 


我 们 之 前 学 过 ， 在 Angular 中 给 元 素 绑 定 事件 的 方法 是 使 用 (event ) 语 法 。 
为 了 给 宿主 元 素 绑 定 事件 ,我们 必须 做 一 些 类 似 的 事情 ， 不 同 之 处 是 这 次 使 用 指令 的 host 








属性 。host 属 性 允许 指令 改变 其 宿主 元 素 的 属性 和 行为 。 





我 们 还 希望 宿主 元 素 使 用 它 的 message 属 性 来 定义 点 击 时 要 弹出 的 消息 。 








首先 , 在 指令 中 添加 inputs 属 性 。 我 们 导入 Input, 并 使 用 @Input 注 解 来 修饰 这 个 输入 属 


import { Component, Input } from 'Gangular/core'; 


class Popup { 
GInput() message: String; 


m 





这 段 代 码 表示 我 们 有 一 个 名 为 message 的 属性 ， 并 且 期 望 接收 一 个 与 之 同名 的 输入 。 














接着 ， 我 们 通过 往 ecomponent 注解 上 添加 host 属 ;4 


— 





Felipe 


生来 把 它 绑 定 到 宿主 元 素 上 。 
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code/advanced components/app/ts/host/steps/host_03.ts 
@Directive({ 

selector: '[popup]', 

host: { 

'(eclick)': 'displayMessage()' 

j 
}) 
然后 ， 当 宿主 元 素 被 点 击 时 就 会 调用 指令 的 displayMessage 方 法 ， 它 会 显示 宿主 元 素 定 

义 的 消息 。 

现在 代码 如 下 所 示 。 


code/advanced components/app/ts/host/steps/host_03.ts 





class Popup { 
GInput()message: String; 


constructor( elementRef: ElementRef) { 
console.log( elementRef); 


j 


displayMessage(): void { 
alert(this.message); 
j 
j 


最 后 ， 我 们 需要 修改 应 用 的 模板 ， 为 每 个 元 素 添 加 要 显示 的 消息 。 














code/advanced components/app/ts/host/steps/host_03.ts 


@Component( { 
selector: 'host-sample-app', 
template: ` 
<div class="ui message" popup 
message-"Clicked the message"» 
«div classz"header"» 
Learning Directives 
«/div» 


«p» 

This should use our Popup diretive 
</p> 
</div> 


<i class="alarm icon" popup 
message-"Clicked the alarm icon"»«/i» 


I» 
export class HostSampleApp3 { 


j 
注意 ， 这 里 使 用 了 两 次 popup 指 令 并 传人 了 不 同 的 message 属 性 。 这 意味 着 当 我 们 运行 本 


[E 


| 





E 





DU 
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用 时 ， 点 击 信 息 内 容 或 者 图 标 将 会 看 到 不 同 的 弹出 信息 ,分 别 如 图 14-11 和 图 14-12 所 示 。 


localhost:8080 says: 
- Clicked the alarm icon 


OK 











图 14-11 弹出 信息 1 


localhost:8080 says: 
w Clicked the message 











图 14-12 ”弹出 信息 2 


14.2.4 添加 按钮 并 使 用 exportAs 
假设 现在 又 来 了 新 需求 : 通过 点 击 按钮 来 手动 触发 弹出 信息 。 那 么 该 如 何在 宿主 元 素 之 外 触 
发 弹出 信息 呢 ? 


为 了 实现 这 个 目标 , 我 们 要 让 指令 在 模板 中 的 任何 地 方 都 能 被 访问 到 。 正 如 我 们 在 之 前 
中 讨论 过 的 ， 可 以 使 用 模板 变量 来 引用 组 件 。 我 们 也 可 以 用 同样 的 方式 来 引用 指令 。 


为 了 可 以 在 模板 中 引用 指令 ,就 要 使 用 exportAt 属 性 。 这 将 人 允许 宿主 元 素 ( 或 宿主 元 素 的 子 
元 素 ) 使 用 #var="exportName" 语 法 定义 一 个 模板 变量 来 引用 指令 。 


让 我 们 把 exportAs 属 性 添加 到 指令 中 。 


code/advanced components/app/ts/host/steps/host 04.ts 























@Directive({ 
selector: '[popup]', 
exportAs: 'popup', 
host: { 
'(click)': 'displayMessage()' 
j 
» 


class Popup { 
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GInput() message: String; 


constructor( elementRef: ElementRef) { 
console.log( elementRef); 


j 


displayMessage(): void { 
alert(this.message); 
} 
} 


现在 我 们 需要 修改 这 两 个 元 素来 导出 模板 变量 。 








code/advanced components/app/ts/host/steps/host 04.ts 


template: ^ 
«div class-"ui message" popup :spopupi-z"popup" 
message-"Clicked the message"» 
«div class-"header"» 
Learning Directives 
«/div» 


«p» 
This should use our Popup diretive 

</p> 

</div> 


<i class="alarm icon" popup #p2="popup" 
message-"Clicked the alarm icon"»«/i» 


可 以 看 到 ， 我 们 用 模板 变量 #p1 代 表 div .message ， 用 #p2 代 表 icon。 
现在 再 添加 两 个 按钮 ,分别 触发 它们 的 弹出 信息 。 


code/advanced components/app/ts/host/steps/host_04.ts 


«div style="margin-top: 20px;"> 
«button (click)="popup1i.displayMessage()" class="ui button"» 
Display popup for message element 
«/button» 


«button (click)2"p2.displayMessage()" class-"ui button"» 
Display popup for alarm icon 
«/button» 
«/div» 


现在 刷新 页 面 并 分 别 点 击 每 个 按钮 ， 每 条 消息 都 会 如 预期 那样 出 现 。 





14.3 ”使 用 内 容 投影 创建 消息 面板 














有 了 时, 我 们 在 创建 组 件 的 时 候 想 要 把 组 件 内 部 的 标记 作为 一 个 参数 传 给 组 件 。 这 种 技术 就 叫 


作 内 容 投影 (content projection )。 它 能 让 我 们 指定 一 些 会 扩散 到 更 大 模板 之 中 的 标记 。 
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14.3.1 


E 








o 在 AngularJS 中 ， 这 种 技术 被 称 为 透 传 ( transclusion )。 


我 们 来 创建 





个 指令 ， 它 将 泻 染 一 个 比较 好 看 的 消息 ， 如 





Learning Directives 
This should use our Popup diretive 





图 14-13 ”popup 指 令 泻 染 的 消 ， 


我 们 的 最 终 目标 是 写 如 下 标记 。 


«div message header="My Message"» 
This is the content of the message 
«/div» 


它 将 被 演 染 成 更 复杂 的 HTML 。 


«div class="ui message"» 
«div class-"header"» 
My Message 
«/div» 























<p> 
This is the content of the message 

</p> 

</div> 





ams 


图 14-13 所 示 。 


这 里 面临 两 个 挑战 .我们 要 给 宿主 元 素 添加 两 个 CSS 类 (ui 和 message )， 还 要 把 div 中 的 内 
容 添 加 到 标记 中 的 一 个 指定 位 置 。 





改变 host 属性 的 CSS 类 





和 之 前 添加 事件 一 样 , 为 了 给 宿主 元 素 添加 属性 ,要 使 用 host 
盟 性 的 名 称 和 值 ， 而 不 是 使 用 (event ) 的 写法 。 在 这 个 例子 中 是 这 样 的 。 











host: { 'class': 'ui message' ] 


它 会 修改 宿主 元 素 ， 把 这 些 类 添加 到 class 





属性 中 。 


14.3.2 使 用 ng-content 


下 一 个 挑战 是 将 宿主 元 素 节点 原来 的 子 节 点 包含 进 视图 中 的 指定 部 分 。 要 做 到 这 一 点 , 我 们 
使 用 ng-content 指 令 。 











属性 ; 但 是 在 这 里 我 们 定义 了 
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因为 这 个 指令 需要 模板 ， 所 以 在 这 里 改 用 组 件 ， 并 编写 如 下 代码 。 


code/advanced components/app/ts/content-projection/content-projection.ts 


@Component( { 
selector: '[message]', 
host: { 
'class': 'ui message' 
J; 
template: ` 


<div class="header "> 
{{ header }} 
</div> 
<p> 
<ng-content></ng-content> 
</p> 


}) 
export class Message { 
GInput() header: string; 


ngOnInit(): void { 
console.log('header', this.header); 
j 
j 


下 面 是 一 些 要 点 : 

O 用 einputs 注 解 表明 我 们 希望 接收 宿主 元 素 上 设置 的 neader 属 性 ; 

O 用 组 件 的 host 属 性 把 宿主 元 素 的 class 属 性 设置 为 ui message; 

O 使 用 cng-content> /ng-content> 将 宿主 元 素 的 子 节 点 投影 到 模板 中 的 指定 位 置 。 


当 我 们 在 浏览 器 中 打开 应 用 并 检查 有 message 属 性 的 div 时 ， 会 看 到 它 正 如 我 们 所 预期 的 那 
样 工作 ， 如 图 14-14 所 示 。 
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O — € / Angur2-Hostelement x 


e localhost:8080 W 


o ngbook2 Angular 2 Advanced Components 


My Message 
This is the content of the message 


ROD Elements Console Sources Network Timeline Profiles Resources » 2 i x 


Em Vv<div class="ui message” header="My Message” message 


v «div» 
«div class-"header"- 
My Message 
</div> 
This is the content of the message 
</p> 
</div> 
</div> 
</host-sample-app> 
«!-- Our app loads here 一 > 
</div> 
html body div.ui.main.text.container host-sample-app TTT 
Styles Event Listeners DOM Breakpoints Properties 
| Filter +, 草食 
element.style { 
bb 


| 
| .ui.message:last-child { 
| margin-bottom: 0; 


ion 











semantic.min.css:11 


bo 
| paddina 16 





图 14-14 ”投影 进来 的 内 容 





14.4 查询 相 邻 的 指令 : 编写 标签 页 


如 果 你 能 创建 一 个 完全 封装 了 自身 行为 的 组 件 ， 那 当然 很 棒 。 

然而 , 随 着 组 件 功能 的 不 断 扩展 , 将 组 件 切割 成 一 些 更 小 的 组 件 再 将 它们 组 合 在 一 起 就 变 得 

意义 了 。 

一 个 拥有 多 个 标签 页 的 标签 面板 是 组 件 协同 工作 的 好 例子 。 标 签 面板 或 者 标签 集合 是 由 多 个 
标签 页 组 合 而 成 的 。 在 这 个 场景 中 ， 我 们 有 一 个 父 组 件 〈 标签 集合 ) 和 多 个 子 组 件 〈 标 签 页 )。 
单独 看 标签 面板 或 标签 页 没有 意义 ,但 把 所 有 逻辑 都 放 在 同一 个 组 件 中 又 大 笨重 了 。 因 此 , 我 们 
将 在 这 个 示例 中 讲解 如 何 让 这 些 单独 的 组 件 协同 工作 。 

下 面 来 编写 这 些 组 件 ， 最 终 目 标 是 这 样 用 。 


«tabset» 
«tab title-"Tab 1"»Tab 1«/tab» 
«tab title-"Tab 2"»Tab 2«/tab» 

















«/tabset» 


我 们 将 使 用 Semantic UI 的 Tab 组 件 "来 泻 染 标签 页 。 








(D http:;//semantic-ui.com/modules/tab.html/examples 
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14.4.4 Tab 组 件 
先 来 编写 Tab 组 件 。 

















code/advanced components/app/ts/tabs/tabs.ts 


@Component({ 
selector: 'tab' 
template: ^ 
«div class-z"ui bottom attached tab segment" 

[class.active]-"active"» 


, 


«ng-content»«/ng-content» 
«/div» 


I» 

class Tab { 
GInput() title: string; 
active: boolean - false; 
name: string; 


j 

这 里 没有 什么 新 概念 。 我 们 声明 了 一 个 组 件 , 它 的 选择 需 是 tab 并 且 接 收 一 个 输入 属性 title。 

然后 泻 染 一 个 cdiv> 标 签 ， 并 使 用 前 一 节 中 学 过 的 内 容 投 影 概 念 把 ctab> 指 令 的 行内 内 容 构 
入 这 个 div。 


接 下 来 声明 三 个 组 件 属性 : title 、active 和 name。 需 要 注意 的 是 ， 我 们 把 title 属 性 添加 
到 了 @Input('title' ) 注 解 中 。 这 个 注解 告诉 Angular 自 动 把 输入 属性 title 和 组 件 属 性 title 进 
行 绑 定 。 



























































"uni 
Pan! 





14.4.2 Tabset 组 件 
现在 让 我 们 转向 Tabset 组 件 ， 用 它 来 包 庄 住 标签 页 。 








code/advanced components/app/ts/tabs/tabs.ts 


@Component({ 

selector: 'tabset', 

template: ^ 

«div class-"ui top attached tabular menu"» 

«a xngFor-"let tab of tabs" 

class-"item" 
[class.active]-"tab.active" 
(click)2"setActive(tab)"» 





{{ tab.title )) 


«/a» 
«/div» 
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<ng-content></ng-content> 


}) 
class Tabset implements AfterContentInit { 
@ContentChildren(Tab) tabs: QueryList«Tab»; 


constructor() { 


} 


ngAfterContentInit() { 
this.tabs.toArray()[0].active = true; 


J 


setActive(tab: Tab) { 
this.tabs.toArray().forEach((t) => t.active = false); 
tab.active - true; 
} 
} 


我 们 来 分 别 讲解 它 的 实现 ， 这 样 可 以 更 好 地 学 习 它 引入 的 新 概念 。 
1. Tabset 的 @Component 注 解 
@Component 部 分 没有 什么 新 概念 。 我 们 使 用 ctabset > 作为 选择 器 。 


模板 本 身 使 用 ngFor 来 遍历 tabs 属 性 。 如 果 一 个 tab 的 active 标 记 是 true ， 那 么 它 就 会 在 用 
来 演 染 tab 的 ca> 元 素 上 添加 CSS 类 active。 


我 们 还 指定 了 ， 在 初始 化 div 之 后 、 在 ng-content 所 在 位 置 演 染 所 有 标签 。 























2. Tabset 类 

现在 让 我 们 把 注意 力 转 向 Tabset 类 。 这 里 的 第 一 个 新 概念 就 是 Tabset 类 实现 了 
AfterContentIn 让 。 这 个 生命 周期 钩子 告诉 Angular， 一 旦 子 组 件 的 内 容 初始 化 ， 就 调用 类 的 方 
法 ( ngAfterContentInit ) 



































3. Tabset 的 ContentChildren 和 QueryList 

接 下 来 ,我 们 声明 tabs 属 性 ， 用 它 来 保存 在 tabset 中 声明 的 每 个 Tab 组 件 。 注 意 ， 这 里 声明 
的 不 是 一 个 rab 的 数组， 而 是 使 用 QueryList 类 并 传人 泛 型 Tab。 这 是 为 什么 呢 ? 

QueryList 是 Angular 提 供 的 类 。 当 我 们 同时 使 用 QueryList 和 ContentChildren 时 ，Angular 
就 会 将 匹配 查询 的 组 件 填充 到 QueryList ， 然 后 在 应 用 状态 变更 时 保持 这 些 填充 项 的 更 新 。 

然而 ，QueryList 需 要 ContentChildren 来 进行 填充 。 我 们 这 就 来 看 一 看 。 

在 tab 实 例 对 象 上 ， 我 们 添加 了 econtentchildren(Tab) 注 解 。 这 个 注解 告诉 Angular 要 在 
tabs 人 参数 中 注入 所 有 Tab 类 型 的 直接 子 指令 。 然 后 再 将 其 赋值 给 组 件 的 tabs 属 性 。 有 了 tabs 属性 ， 
我 们 就 可 以 获得 并 使 用 所 有 的 子 Tab 组 件 了 。 
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4. 初始 化 Tabset 

当 这 个 组 件 初始 化 之 后 ， 我 们 希望 它 的 第 一 个 标签 页 是 激活 的 。 为 了 做 到 这 点 ， 要 使 用 
ngAfterContentInit PK t ( AfterContentInit £j XJ f XAFS )。 注 意 这 里 使 用 
this .tabs .toArray() 将 Angular 的 QueryList 强 制 转换 为 原生 的 TypeScript 数 组 。 

5. Tabset 的 setActive 方 法 

最 后 ， 我 们 定义 了 setActive 方 法 。 当 点 击 模板 中 的 标签 页 时 就 会 调用 这 个 方法 ， 例 如 
(click)="setActive(tab)"。 这 个 函数 会 遍历 所 有 标签 页 ， 将 它们 的 active 属 性 设置 为 false。 
然后 把 我 们 点 击 的 标签 页 设置 为 激活 页 。 



































14.4.3 ”使 用 Tabset 
下 一 个 任务 是 开发 一 个 应 用 组 件 ， 它 将 使 用 我 们 创建 好 的 这 两 个 组 件 。 我 们 可 以 这 样 做 。 


code/advanced components/app/ts/tabs/tabs.ts 








GComponent ( f 
selector: 'tabs-sample-app', 
template: ^ 
«tabset» 
«tab title-z"First tab"» 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Quibusdam magni quia ut harum facilis, ullam deleniti porro 
dignissimos quasi at molestiae sapiente natus, neque voluptatum 
ad consequuntur cupiditate nemo sunt. 
«/tab» 
«tab «ngFor-"let tab of tabs" [title]-"tab.title"» 
{{ tab.content ]] 
«/tab» 
«/tabset» 


}) 
export class TabsSampleApp { 
tabs: any; 


constructor() { 

this.tabs = [ 
{ title: 'About', content: 'This is the About tab' }, 
{ title: 'Blog', content: 'This is our blog' }, 

{ title: 'Contact us', content: 'Contact us here' ], 
]; 
} 

} 


我 们 使 用 tabs-sample-app 作 为 组 件 的 选择 器 并 且 使 用 了 组 件 Tabset 和 Tab。 

我 们 在 模板 中 创建 了 一 个 tabset 组 件 并 添加 了 一 个 静态 的 tab 组 件 ( 第 一 页 ), 然后 往 组 件 控 
制 妖 类 中 的 tabs 属 性 中 又 添加 了 几 个 tab 组 件 ， 曾 明了 动态 演 染 tab 组 件 的 方法 。 完 成 后 的 应 用 
如 图 14-15 所 示 。 
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© © © /Youer2- Paront and Ch x (E — 


Œ | (5 localhost:8080 


S netbook2 Angular 2 Advanced Components 


First tab About Blog Contact us 


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magni quia ut harum facilis, 
ullam deleniti porro dignissimos quasi at molestiae sapiente natus, neque voluptatum ad 
consequuntur cupiditate nemo sunt. 























uu 


图 14-15 ”使 用 Tabset 的 应 

















14.5 生命 周期 钧 子 


Angular 提 供 了 一 些 生命 周期 钩子 。 在 指令 生命 周期 的 每 个 阶段 之 前 或 之 后 ， 它 们 人 允许 你 添 
加 并 执行 一 些 代码 。 
Angular 提 供 的 生命 周期 钩子 如 下 : 
O OnInit 
Q OnDestroy 
口 DoCheck 
Q OnChanges 
口 AfterContentInit 
口 AfterContentChecked 
口 AfterViewInit 
口 AfterViewChecked 
这 些 钩 子 的 使 用 方法 遵循 相似 的 模式 。 
为 了 得 到 这 些 事件 的 通知 ， 你 需要 : 
(1) 声明 你 的 指令 类 实现 接口 ; 
(2) 声明 钩子 对 应 的 ng 方法 〈 例 如 ，ngonInit )。 
每 个 方法 名 都 以 ng 开头 ， 再 加 上 钩子 的 名 字 。 比 如 ，onIn 让 要 声明 ngonIn 让 方法 ，After- 
ContentInit 要 声明 ngAfterContentInit 方 法 ， 以 此 类 推 。 
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当 Angular 知 道 组 件 实现 了 这 些 函 数 后 ， 就 会 在 适当 的 时 机 调用 它们 。 
下 面 分 别 看 看 每 个 钓 子 的 用 法 以 及 使 用 场景 。 











实际 上 ， 让 这 个 类 实现 (implement ) 该 接口 并 不 是 必需 的 ， 也 可 以 只 创建 此 
钩子 要 求 的 方法 。 不 过 实现 该 接口 是 一 项 最 佳 实践 ", 它 能 在 强 类 型 和 编辑 器 等 
方面 给 你 带 来 好 处 。 


14.5.1 OnInit 和 OnDestroy 


在 指令 的 属性 初始 化 完成 之 后 、 子 指令 的 属性 开始 初始 化 之 前 ，Angular 会 调用 onInit 钧 子 。 
同样 ， 在 指令 的 实例 销毁 之 前 ，Angular 调 用 OnDestroy 钧 子 。 它 最 典型 的 应 用 场景 是 ， 当 指 
令 销毁 、 要 做 一 些 清理 工作 时 。 
为 了 说 明 这 些 ， 我 们 来 编写 一 个 同时 实现 了 onInit 和 OnDestroy 的 组 件 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 01.ts 





























@Component( { 
selector: 'on-init', 
template: ^ 
«div class-"ui label"» 
«i class-"cubes icon"»«/i» Init/Destroy 
«/div» 
p 
class OnInitCmp implements OnInit, OnDestroy { 
ngOnInit(): void { 
console.log('On init'); 


j 


ngOnDestroy(): void { 
console.log('On destroy'); 


j 
】 


在 这 个 组 件 中 ， 当 钩子 被 调用 时 ， 我 们 只 是 往 控制 台中 打印 字符 串 on initfllon destroy. 


要 测试 这 些 钩 子 , 我 们 就 要 在 应 用 组 件 中 使 用 这 些 组 件 , 并 用 ngIf 来 根据 布尔 值 决 定 是 否 显 
示 我 们 的 组 件 。 然 后 添加 一 个 按钮 让 我 们 切换 这 个 布尔 型 标志 : 当 标记 变 为 假 时 ,组 件 会 从 页 面 
中 移 除 ，OnDestroy 就 会 被 调用 ; 当 标记 变 为 真 时 ，onInit 钩 子 会 被 调用 。 


应 用 组 件 看 起 来 如 下 所 示 。 


























(D https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html 
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code/advanced components/app/ts/lifecycle-hooks/lifecycle 01.ts 


GComponent( { 
selector: 'lifecycle-sample-app', 
template: ^ 
«h4 class-"ui horizontal divider header"» 
OnInit and OnDestroy 
«/h4» 


«button class-"ui primary button" (click)-"toggle()"» 
Toggle 
«/button» 
«on-init «nglIfz"display"»«/on-init» 
}) 
export class LifecycleSampleApp1 { 
display: boolean; 


constructor() { 
this.display = true; 
} 


toggle(): void { 
this.display = !this.display; 
j 
j 


HüGstnAWHR, n EU Sjoninitf4- T TEZRTE EKIH, n 14-1687. 


OO © / Proiz- ueris x VR [rens] 











DC D localhost:62935 i EI 





% ngbook2 Angular 2 Lifecycle Hooks 


Onlnit and OnDestroy 


(€ 





R O | Elements Console Sources Network Timeline Profiles Resources Security Audits 2| i X 
© Ww «top frame» M Preserve log 
Live reload enabled. index):79 
>XHR finished loading: GET "http://localhost:62935/app. js". system. src.js:1049 | 
On init app.ts:26 | 
Argitan 2 is running in the development mode. Call enableProdMode() to enable the production angular2.dev.js:354 
mode. 


DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next angular2-polyfills.js:1152 
major release. Use removeTask/removeRepeatingTask/removeMicroTask 








图 14-16 组件 的 初始 状态 
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在 第 一 次 点 击 Toggle 按 钮 时 , 组 件 被 销毁 , OonDestroy 钧 子 也 如 预期 一 般 被 调用 了 , 如 图 14-17 
所 示 。 
























0 周转 (Anour2-Litecyciehooks x 2 Felipe | 
€ > CD localhost:62935 v 





nebook2 Angular 2 Lifecycle Hooks 


Oninit and OnDestroy 





Toggle 
[X O | Elements Console Sources Network Timeline Profiles Resources Security Audits a2| : X 
© Ww «top frame» v E Preserve log 

M» XHR finished loading: GET "http://localhost:62935/app. js". tem. src. js: 

On init app.ts:26 

Angular 2 is running in the development mode. Call enableProdMode() to enable the production ^ — angular2.dev.js:354 


mode. 
A DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next angular2-polyfills.js:1152 
major release. Use removeTask/removeRepeatingTask/removeMicroTask 
On destroy app.ts:30 
> 





图 14-17 OnDestroyf4-f: 首次 点 击 Toggle 按 钮 


如 果 再 次 点 击 Toggle 按 钮 ， 结 果 将 如 图 14-18 所 示 。 


8 0 P anuar 2- urocycie hoors x VE [El 
€ > @ [D localhost62935 2 三 














ngbook2 Angular 2 Lifecycle Hooks 


Oninit and OnDestroy 


IL ME © iniDestroy 








R O Elements Console Sources Network Timeline Profiles Resources Security Audits 





© Ww «top frame» v E Preserve log 
0n init 
Angular 2 is running in the development mode. Call enableProdMode() to enable the production angular2.dev. j5:354 
mode. 


A DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next angular2-polyfills.js:1152 
major release. Use removeTask/removeRepeatingTask/removeMicroTask 


On destroy app.ts: 
On init app.ts:26 
> 





图 14-18 OnDestroyf-f: 再 次 点 击 Toggle 按 钮 
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14.5.2 OnChanges 


OnChanges 钩 子 在 一 个 或 多 个 组 件 属性 更 改 后 调用 。ngonChanges 方 法 会 接收 一 个 参数 来 告 
诉 你 哪些 属性 发 生 了 改变 。 


为 了 更 好 地 理解 这 一 点 , 我 们 来 编写 一 个 评论 组 件 。 该 组 件 有 两 个 输入 属性 : name 和 comment。 


























code/advanced components/app/ts/lifecycle-hooks/lifecycle 02.ts 


@Component( { 
selector: 'on-change', 
template: ` 
<div class="ui comments"> 
<div class="comment"> 
<a class="avatar"> 
<img src="app/images/avatars/matt.jpg"> 
</a> 
<div class="content"> 
<a class="author">{{name}}</a> 
<div class="text"> 
{{comment}} 
</div> 
</div> 
</div> 
</div> 


}) 

class OnChangeCmp implements OnChanges { 
GInput('name') name: string; 
GInput('comment') comment: string; 


ngOnChanges(changes: [[propName: string]: SimpleChange]): void { 
console.log('Changes', changes); 
j 
j 





























最 重要 的 一 点 是 ， 这 个 组 件 实现 了 onchanges 接 口 ， 并 声明 了 该 接口 的 ngonCchanges 方 法 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 02.ts 


ngOnChanges(changes: {[propName: string]: SimpleChange}): void { 
console.log('Changes', changes); 


} 


当 name 属 性 或 comment 属 性 的 值 发 生变 化 时 ， 这 个 方法 就 会 被 触发 。 这 时 ， 我 们 就 会 收 到 一 
个 对 象 ， 它 把 发 生变 化 的 字段 映射 到 simpleChange 对 象 中 。 

每 个 SimpleChange 实 例 都 有 两 个 字段 : currentValue 和 previousValue。 如 果 组 件 的 name 
和 comment 属 性 都 发 生 了 变化 ， 那 么 该 方法 的 changes 值 就 应 该 是 这 样 的 。 

{ 


name: { 

















currentValue: 'new name value', 
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previousValue: 'old name value' 


m 

comment: { 
currentValue: 'new comment value', 
previousValue: 'old comment value' 


} 
} 
现在 对 应 用 组 件 进行 修改 , 让 它 使 用 我 们 的 组 件 并 添加 一 个 小 型 表单 。 这样 就 可 以 试 试 与 组 
件 的 name 属 性 和 comment 属 性 的 交互 了 。 











ni 














code/advanced components/app'/ts/lifecycle-hooks/lifecycle 02.ts 


GComponent ( f 
selector: 'lifecycle-sample-app', 
template: ^ 
«h4 class-"ui horizontal divider header"» 
OnInit and OnDestroy 
«/h4» 


«button class-"ui primary button" (click)-"toggle()"» 
Toggle 

«/button» 

«on-init xngIf-"display"»«/on-init» 





«h4 class-"ui horizontal divider header"» 
OnChange 
«/h4» 


«div class-"ui form"» 
«div class-"field"» 
«label»Name«/label» 
«input type-"text" snamefld value="{{name}}" 
(keyup)2"setValues(namefld, commentfld)"» 
«/div» 


«div class-"field"» 
«label»Comment«/label» 
«textarea (keyup)-"setValues(namefld, commentfld)" 
rows-"2" scommentfld»([comment]]«/textarea» 
«/div» 
«/div» 


«on-change [name]-z"name" [comment]-"comment"»«/on-change» 


I» 
export class LifecycleSampleApp2 { 


display: boolean; 
name: string; 
comment: string; 


constructor() { 


this.display - true; 
this.name - 'Felipe Coury'; 
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this.comment = 'I am learning so much!'; 
; 


} 


setValues(namefld, commentfld): void { 
this.name - namefld.value; 
this.comment - commentfld.value; 


J 


toggle(): void { 


this.display = !this.display; 


} 
} 





重点 是 我 们 往 模板 中 添加 了 一 个 新 的 表单 ， 这 个 表单 有 name 和 comment 两 个 字段 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 02.ts 


«div class-"ui form"> 
«div class-"field'» 
«label»Name«/label» 


«input type-"text" snamefld value="{{name}}" 
(keyup)2"setValues(namefld, commentfld)"» 


«/div» 


«div class-"field'» 


«label»Comment«/label» 
«textarea (keyup)-"setValues(namefld, commentfld)" 
rows="2" scommentfld»(Í[comment]]«/textarea» 


«/div» 
«/div» 














无 论 在 name 字 段 还 是 comment 字 段 的 keyup 事 件 触发 时 , 我 们 都 通过 模板 变量 调用 setValues 
方法 。 模 板 变 量 namef1d 和 commentfld 分 别 代 表 这 里 的 input 和 textarea。 


这 个 方法 只 是 取出 这 些 字段 的 值 并 更 新 对 应 的 name 和 comment 属 性 。 








code/advanced components/app/ts/lifecycle-hooks/lifecycle 02.ts 


setValues(namefld, commentfld): void { 
this.name - namefld.value; 
this.comment - commentfld.value; 


} 


现在 ， 当 我 们 第 一 次 打开 应 





用 时 ， 就 会 看 到 onchanges 钩 子 被 调用 了 ， 如 图 14-19 所 示 。 





这 个 事件 在 刚刚 设置 了 初始 值 时 发 生 在 LifecycleSampleApp 组 件 的 构造 函数 中 。 





如 果 在 Name 输 入 框 中 进 


行 输入 ， 就 会 看 到 钩子 函数 不 断 被 重复 调用 。 如 图 14-20 所 示 ， 当 我 














们 在 Name 输 入 框 中 粘贴 Nate Murray 时 ， 控 制 台 正如 我 们 预期 的 那样 反映 出 了 值 的 变化 。 
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Q9 ^ € / g angular 2- Litecycle hooks x | — 
€ > Œ D localhost:8080 











w2 Angular 2 Lifecycle Hooks 


Onlnit and OnDestroy 


OnChange 
Name 


Felipe Coury 


Comment 


lam learning so much! 


Felipe Coury 


lam learning so much! 





R [] Elements Console Sources Network Timeline Profiles Resources Security Audits 


© Ww «top frame» v D Preserve log 


Changes w Object (name: SimpleChange, comment: SimpleChange) 日 
" comment: SimpleChange 
currentValue: "I am learning so much!" 
> previousValue: Object 
b proto : SimpleChange 
"name: SimpleChange 
currentValue: "Felipe Coury" 
> previousValue: Object 
» proto : SimpleChange 
b proto : Object 





图 14-19 OnChanges f: 首次 打开 应 用 时 


© OO /Yanour2- Litecycie hooks x iD 
€ > CŒ D localhost:8080 











ngbook2 Angular 2 Lifecycle Hooks 


Onlnit and OnDestroy 
OnChange 


Name 


Nate Murray 


Comment. 


lam learning so much! 


Nate Murray 
lam learning so much! 





民 ü Elements Console Sources Network Timeline Profiles Resources Security Audits 


© Ww «top frame» v B Preserve log 


Changes w Object (name: SimpleChange) Eù 
* name: SimpleChange 
currentValue: "Nate Murray" 
previousValue: "Felipe Coury" 
P proto : SimpleChange 
b. proto : Object 








图 14-20 OnChanges44 f: 输入 后 
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14.5.3 DoCheck 

















Angular 默 认 的 通知 系统 就 是 通过 onchanges 实 现 的 ， 当 Angular 的 变更 检测 机 制 检测 到 指 
令 的 属性 变化 时 就 会 触发 它 。 


然而 ， 有 时 候 这 种 变更 通知 机 制 可 能 开销 过 大 ， 尤 其 是 在 对 性 能 要 求 较 高 的 场景 下 。 


有 时 候 , 我 们 只 想 在 特定 的 条 件 下 进行 一 些 操作 ， 比 如 在 移 除 或 添加 一 个 项 目 时 , 或 是 在 某 
个 特定 的 属性 发 生变 化 时 。 


如 果 遇 到 上 述 场景 之 一 ， 就 可 以 使 用 Docheck 钩 子 。 















































A 有 一 点 非常 重要 ， 如 果 我 们 同时 实现 了 OnChanges 和 DoCheck， 那 么 0nChanges 
会 被 DoCheck 鹤 盖 ， 也 就 是 说 OnChanges 会 被 忽略 。 
1. 变更 检测 


为 了 找 出 有 哪些 变化 ，Angular 提 供 了 differ ( 差分 器 ) 类 。differ 会 对 指令 的 某 个 属性 进行 计 
算 ， 以 确定 它 是 否 发 生 了 改变 。 


有 两 种 内 置 的 differ 类 型 : 迭代 differ 和 键 值 对 differ。 
2. 迭代 differ 


当 我 们 使 用 列表 类 的 数据 结构 并 且 只 想 知道 在 列表 中 添加 或 删除 了 哪些 条 目 时 , 应 该 使 用 和 迭 
代 differ。 


3. 键 值 对 differ 


当 我 们 使 用 字典 类 数据 结构 时 ， 应 该 使 用 键 值 对 differ; 它 在 键 一 级 工作 。 这 个 differ 会 识别 
出 键 的 添加 、 删 除 或 某 个 键 对 应 值 的 改变 。 


4. 使 用 do-check-item 泻 染 单 条 评论 
为 了 闸 明 这 些 概念 ， 我 们 来 构建 一 个 演 染 一 系列 评论 的 组 件 ， 如 图 14-21 所 示 。 
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g Justen posted a comment 1 
Thanks! 
人 Remove Æ Clear €. 12 Likes 
^ 
de Jenny posted a comment 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 

Ü Remove A Clear €". 4Likes 





g Justen posted a comment 


Really cool! 
Ü Remove Æ Clear ® 7 Likes 





图 14-21 ”Docheck 钩 子 示例 
首先 ， 我 们 编写 一 个 泻 染 单条 评论 的 组 件 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 


GComponent( ( 
selector: 'do-check-item', 
outputs: ['onRemove'], 
template: ^ 
«div class-"ui feed"» 
«div classz'"event"» 
«div class-"label" xngIf-z"comment.author"» 
«img src-"/app/images/avatars/((comment.author.toLowerCase()]]).jpg"» 
«/div» 
«div classz'"content"» 
«div classz"summary"» 
«a classz"user"» 
{{comment . author] ] 
«/a» posted a comment 
«div class-"date"» 
1 Hour Ago 
«/div» 
«/div» 
«div classz"extra text"> 
{ {comment . comment ] ) 
«/div» 
«div classz"meta"» 
«a class-"trash" (click)-"remove()"» 
«i class-"trash icon"»«/i» Remove 
«/a» 
«a class-"trash" (click)-"clear()"» 
«i class-"eraser icon"»«/i» Clear 
«/a» 
«a class-"like" (click)-"like()"» 
«i class-"like icon"»«/i» [(comment.likes]] Likes 
«/a» 
«/div» 
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«/div» 
«/div» 
«/div» 


}) 

我 们 声明 了 组 件 的 元 数据 。 组 件 会 接收 输入 属性 comment 并 泻 染 它 ， 还 会 在 点 击 删除 按钮 时 
发 出 一 个 事件 。 

继续 看 组 件 类 的 实现 。 


code/advanced components/app'/ts/lifecycle-hooks/lifecycle 03.ts 








class DoCheckItem implements DoCheck { 
GInput('comment') comment: any; 
onRemove: EventEmitter«any»; 
differ: any; 


在 这 个 类 声明 中 ， 我 们 实现 了 pocheck 接 口 ， 并 且 声 明了 输入 属性 comment 、 输 出 事件 
onRemove 和 一 个 di ffer 属 性 。 








code/advanced components/app'/ts/lifecycle-hooks/lifecycle 03.ts 


constructor(differs: KeyValueDiffers) { 
this.differ - differs.find([]).create(null); 
this.onRemove - new EventEmitter(); 


J 


在 这 个 构造 函数 中 ， 我 们 用 differs 变 量 接收 了 一 个 KeyvalueDiffers 的 实例 ， 然 后 通过 
differs.find([]).create(null) 语 法 创建 了 一 个 键 值 对 differ 的 实例 。 我 们 还 初始 化 了 事件 发 
射 器 onRemove。 


接 下 来 ， 我们 来 实现 接口 要 求 的 ngDocheck 方 法 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 





























ngDoCheck(): void { 
var changes = this.differ.diff(this.comment); 


if (changes) ( 
changes.forEachAddedItem(r -» this.logChange('added', r)); 
changes.forEachRemovedItem(r => this.logChange('removed', r)); 
changes.forEachChangedItem(r => this.logChange('changed', r)); 
j 
j 
这 里 用 键 值 对 differ 检 测 了 变更 ， 只 要 调用 giff 方 法 并 提供 想 要 检查 的 属性 就 可 以 了 。 在 这 
个 例子 中 ， 我 们 想 知 道 comment 属 性 是 否 发 生 了 变化 。 
当 没有 检测 到 任何 变化 时 ， 返 回 值 就 是 nu11。 如 果 有 变化 ， 我 们 可 以 调用 differ 上 的 三 个 不 
同 的 迭代 方法 : 
口 forEachAddedItem, ， 用 于 枚 举 所 有 新 增 的 键 ; 




















图 灵 社 区 会 员 xiaochao12312312ff(499290328(9 qq.com) 专 享 尊重 版 权 


14.5 ”生命 周期 钩子 381 





D forEachRemovedItem， 用 于 枚 举 所 有 删除 的 键 ; 
D forEachChangedItem ， 用 于 枚 举 所 有 变化 的 键 。 


每 个 方法 都 会 调用 我 们 提供 的 接收 record 参 数 的 回调 函数 。 对 于 键 值 对 differ， 这 个 record 参 
数 是 KVChangeRecord 类 的 实例 ( 如 图 14-22 所 示 )。 











Y KVChangeRecord (key: "likes", previousValue: null, currentValue: 10, _nextPrevious: null, next: null.) 

.next: null 

 .nextAdded: null 

.nextChanged: null 

.nextPrevious: null 

.nextRemoved: null 

.prevRemoved: null 

currentValue: 10 

key: "likes" 

previousValue: 10 





图 14-22 ”KVChangeRecord 实 例 的 一 个 例子 
用 来 了 解 变 化 的 最 重要 的 几 个 字 役 是 key . previousValue 和 currentValue。 
接 下 来 ,我们 写 一 个 方法 ， 把 发 生 的 这 些 变 化 以 通俗 易 懂 的 句子 输出 到 控制 台中 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 

















logChange(action, r) ( 
if (action --- 'changed') { 
console.log(r.key, action, 'from', r.previousValue, 'to', r.currentValue); 





j 
if (action --- 'added') { 
console.log(action, r.key, 'with', r.currentValue); 
j 
if (action === 'removed') { 
console.log(action, r.key, '(was ' + r.previousValue + ')'); 
j 
j 


最 后 ， 我 们 来 写 几 个 方法 ， 帮 助 我 们 改变 组 件 中 的 值 以 便 触 发 nocheck 钧 子 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 


remove(): void { 
this.onRemove.emit(this.comment); 


j 


clear(): void ( 


delete this.comment.comment; 
j 


like(): void ( 
this.comment.likes += 1; 
j 
remove( ) 方 法 会 发 出 事件 ， 表 示 用 户 请 求 删 除 这 条 评论 。clear( ) 方 法 会 把 评论 文字 从 评论 
对 象 中 删除 。1ike( ) 方 法 会 增加 这 条 评论 的 “ 赞 ” 数 。 
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5. 使 用 qo-ceheck 泻 染 评 论 列表 
写 好 了 表示 单条 评论 的 组 件 之 后 ， 我 们 再 来 写 第 二 个 组 件 ， 它 负责 泻 染 评论 列表 。 




















code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 


@Component( { 
selector: 'do-check', 
template: ` 
«do-check-item [comment ]="comment" 
xngFor="let comment of comments" (onRemove)="removeComment($event)"> 
</do-check-item> 


«button class="ui primary button" (click)-"addComment()"» 


Add 
«/button» 


}) 


组 件 的 元 数据 十 分 简单 : 使 用 上 面 创建 的 组 件 ， 然 后 用 ngFor 来 遍历 组 件 列表 并 泻 染 它 们 。 
我 们 还 加 了 一 个 按钮 让 用 户 添加 新 评论 。 


接 下 来 实现 评论 列表 类 DoCheckCmp。 











code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 


class DoCheckCmp implements DoCheck { 
comments: any[]; 
iterable: boolean; 
authors: string [] ; 
texts: string[]; 
differ: any; 


我 们 声明 了 要 月 











Za 


的 变量 : comments, iterable, authorsjflltexts. 


lim 





code/advanced components/app'/ts/lifecycle-hooks/lifecycle 03.ts 


constructor(differs: IterableDiffers) { 
this.differ - differs.find([]).create(null); 
this.comments - []; 


this.authors - ['Elliot', 'Helen', 'Jenny', 'Joe', 'Justen', 'Matt']; 
this.texts - [ 
"Ours is a life of constant reruns. We're always circling back to where we\ 
'd we started, then starting all over again. Even if we don't run extra laps tha\ 
t day, we surely will come back for more of the same another day soon.", 
'Really cool!', 
"Thanks! ' 


]; 


this.addComment(); 
j 


对 于 这 个 组 件 , 我 们 使 用 了 迭代 differ。 可 以 看 到 这 里 用 来 创建 differ 的 类 是 IterableDiffers， 
但 创建 differ 的 方式 还 是 和 以 前 一 样 。 
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在 构造 函数 中 , 我们 还 初始 化 了 作者 列表 和 评论 文字 列表 , 会 在 添加 新 评论 的 时 候 用 到 它们 。 
最 后 ， 我 们 调用 addComment() 方 法 。 这 样 ， 评 论 列表 在 应 用 刚刚 初始 化 时 不 会 是 空白 的 。 
接 下 来 的 三 个 方法 是 用 来 添加 一 条 新 评论 的 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 








getRandomInt(max: number): number { 
return Math.floor(Math.random() * (max + 1)); 


} 


getRandomItem(array: string[]): string { 
let pos: number - this.getRandomInt(array.length - 1); 
return array[pos]; 


} 


addComment(): void { 
this.comments.push(Í 
author: this.getRandomItem(this.authors), 
comment: this.getRandomItem(this.texts), 
likes: this.getRandomInt(20) 
D); 
} 


removeComment(comment) { 
let pos = this.comments.indexOf(comment); 
this.comments.splice(pos, 1); 


} 
我 们 声明 了 两 个 方法 ， 它 们 分 别 返回 一 个 随机 数 和 一 个 数组 中 的 随机 项 。 
最 后 ，addComment( ) 方 法 会 使 用 随机 作者 、 随 机 文本 和 随机 点 赞 数 来 添加 一 条 新 评论 。 
接 下 来 是 removeComment() 方 法 ， 它 用 来 从 列表 中 删除 一 条 评论 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 


removeComment(comment) { 
let pos = this.comments.indexOf(comment); 
this.comments.splice(pos, 1); 


] 
最 后 声明 变更 检测 方法 ngDoCheck( )。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 03.ts 


ngDoCheck(): void { 
var changes - this.differ.diff(this.comments); 





if (changes) ( 
changes.forEachAddedItem(r => console.log('Added', r.item)); 
changes.forEachRemovedItem(r => console.log('Removed', r.item)); 
j 
j 
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尽管 在 行为 上 与 键 值 对 differ 一 样 ， 但 是 迭代 differ 只 提供 了 添加 和 删除 条 目的 方法 。 
当 运 行 应 用 时 ， 我 们 得 到 了 一 个 只 有 一 条 评论 的 列表 ( 如 图 14-23 所 示 )。 






































OO e Frogin -Leow roots x LS 
> Œ D localhost:8080 xs 
Comment 
lam learning so much: 
Felipe Coury 
lam learning so much! 
DoCheck 
QE vanpostedacomment 11 
" 
tday, we 
RO Elements c sole SS rces Network Timeline Profiles RE rces SES rity TAE 2 TX 
© Y <topframe> v D Preserve log 

Changes » Object app.ts:63 
Added » Object 15:21 

On init app.ts:3l | 
added author with Matt Gps 
poss comment with Ours is a life of constant reruns. We're always circling back to where we'd we started, then 

starting all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another 

day.. Ed 

added likes with 14 app.ts:130 


图 14-23 ”初始 状态 
我 们 还 看 到 一 些 信 息 被 打印 到 了 控制 台中 ， 就 像 下 面 这 
added author with Matt 


added likes with 14 


我 们 来 看 看 ， 点 击 Add 按 钮 来 添加 一 条 新 评论 时 会 发 生 什 么 ( 如 图 14-24 所 示 )。 





ID E yere 
> G ID localhost:8080 «s 


Felipe Coury 
lam learning so much! 








DoCheck 


? Matt posted a comment 
o rs is alife of constant reruns. We're always ci Visited re we'd we 
ain. Even if we don't run extra laps that day, we 
of the same another. ian lay soon. 






QU Helenposteda comment 


Thanks! 
B Remove 4 Y Tik 


i o% 


Elements Console Sources Network Timeline Profiles Resources Security Audits 





RO 
© V <topframe> v E Preserve log 
Added Object (author: "Helen", comment: "Thanks!", likes: 17) app.ts:210 
added author with Helen app.ts:130 
added comment with Thanks! app.ts:130 
app.ts:130 


added likes with 17 
> 


图 14-24 添加 的 评论 











可 以 看 到 迭代 differ 识 别 出 了 添加 到 列表 中 的 新 评论 对 象 {author: "Hellen", 
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"Thanks!", likes: 17). 
评论 对 象 中 单独 的 属性 变化 也 打印 出 来 了 ， 也 就 是 键 值 对 differ 检 测 到 的 。 


added author with Helen 
added comment with Thanks! 
added likes with 17 


现在 点 击 这 条 新 评论 的 Likes 图 标 ( 如 图 14-25 所 示 )。 





i -> CD localhost:8080 Xx 


2 Felipe Coury 
lam learning so much! 


© © @ / gy angutar 2 - Litecycie hooks x Feipe || 














DoCheck 


T Mattposteda comment 


Iways circling back to where we'd we 
extra laps that day, we 










© Heien postedacomment 


Thanks! 
B Remove 4 Clex YP 18Like 
[X O | Elements Console Sources Network Timeline Profiles Resources Security Audits ix 
© Ww <topframe> v B Preserve log 
likes changed from 17 to 18 app.ts:127 


> 








——— 
图 14-25 ”点 赞 数 变 化 


现在 只 有 1ike 属 性 的 变化 会 被 检测 到 。 
如 果 点 击 Clear 图 标 ， 它 会 从 评论 对 象 中 删除 comment 键 ( 如 图 14-26 所 示 )。 


| © © 0 / p aguar 2- Uecycenooes x Felge | 











&- > Œ |D localhost8080 par 





Felipe Coury 
lam learning so much! 


DoCheck 


2 Matt posted a comment. 1 


Ours isa life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 

B Remove Æ Clear Y 14Likes 


© Heien posted a comment 





B Remove Z clear 99 18 Uke 
民 O | Elements Console Sources Network Timeline Profiles Resources Security Audits Pox 
© Ww «top frame» v B Preserve log 

removed comment (was Thanks!) app.ts:133 


E 








图 14-26 清空 评论 内 容 
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打印 出 的 日 志 证 实 这 个 键 确实 被 删除 了 
最 后 ， 我 们 通过 点 击 Remove 图 标 删除 最 后 一 条 评论 ( 如 图 14-27 所 示 )。 








© / gy angular 2 - Utecycle hooks x 


Œ DD localhost:8080 





Docheck 





| 民 O Elements Console Sources Network Timeline Profiles Resources Security Audits 





© Ww «top frame» v E Preserve log 
Removed Object {author: "Helen", likes: 18} app. ts:211 





图 14-27 WREE 
如 预期 一 样 ， 我 们 得 到 了 一 条 对 象 被 删除 的 日 志 。 








14.5.4 AfterContentInit, AfterViewInit, AfterContentChecked 和 
AfterViewChecked 


AfterContentIn 让 钩子 的 调用 发 生 在 OnIn 让 之 后 。 一 旦 组 件 或 指令 的 内 容 初始 化 完成 ， 就 
会 立即 调用 它 。 

AfterContentChecked 也 类 似 ， 不 过 它 是 在 指令 检查 结束 后 调用 的 。 这 里 的 “检查 ”是 指 变 
更 检测 系统 进行 的 检查 。 

另外 两 个 钧 子 AftervViewIn 让 和 AfterViewChecked 会 紧 跟 着 上 述 内 容 钩子 , 在 视图 完全 初始 
化 之 后 触发 。 但 是 这 两 个 钧 子 只 适用 于 组 件 ， 不 能 用 于 指令 。 

同时 ，AfterXXXInit 之 类 的 钧 子 在 整个 指令 生命 周期 里 都 只 会 被 调用 一 次 ， 而 
AfterXXXChecked 之 类 的 钓 子 在 每 次 变更 检测 周期 后 都 会 被 调用 。 

为 了 更 好 地 理解 这 些 , 我 们 来 编写 另 一 个 组 件 , 它 会 对 每 个 生命 周期 钩子 都 打印 日 志 到 控制 
台 。 它 还 有 一 个 counter 属 性 ， 可 以 通过 点 击 按钮 来 增加 计数 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 04.ts 


















































@Component( { 
selector: 'afters', 
template: ` 
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«div class="ui label"» 
«i class-"list icon"»«/i» Counter: {{ counter }} 
«/div» 


«button class-"ui primary button" (click)-"inc()"» 
Increment 
«/button» 


}) 
class AftersCmp implements OnInit, OnDestroy, DoCheck, 
OnChanges, AfterContentInit, 
AfterContentChecked, AfterViewInit, 
AfterViewChecked { 
counter: number; 


constructor() { 


console.log('AfterCmd --------- [constructor]'); 
this.counter - 1; 

j 

inc() { 
console.log('AfterCmd --------- [counter]'); 


this.counter += 1; 


, 


ngOnInit() ( 
console.log('AfterCmd - OnInit'); 


ngOnDestroy() { 
console.log('AfterCmp - OnDestroy'); 


ngDoCheck() { 
console.log('AfterCmp - DoCheck'); 


ngOnChanges() { 
console.log('AfterCmp - OnChanges'); 


ngAfterContentInit() { 
console.log('AfterCmp - AfterContentInit'); 


ngAfterContentChecked() { 
console.log('AfterCm 


oO 
l 


AfterContentChecked'); 


ngAfterViewInit() { 
console.log('AfterCmp - AfterViewInit'); 











ngAfterViewChecked() { 
console.log('AfterCmp - AfterViewChecked'); 
j 
j 








现在 把 它 和 Toggle 按 钮 添加 到 应 用 组 件 中 ， 就 像 之 前 在 onDpestroy 钧 子 中 的 用 法 一 样 。 


code/advanced components/app/ts/lifecycle-hooks/lifecycle 04.ts 


<afters «ngIf-"displayAfters"»«/afters» 
«button class-"ui primary button" (click)-"toggleAfters()"» 
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Toggle 
«/button» 





应 用 组 件 的 最 终 实 现 看 起 来 应 该 是 这 样 的 。 





code/advanced components/app/ts/lifecycle-hooks/lifecycle 04.ts 


@Component( { 


}) 


selector: 'lifecycle-sample-app', 

template: ^ 

«h4 class="ui horizontal divider header"» 
OnInit and OnDestroy 

«/h4» 


«button class-"ui primary button" (click)-"toggle()"» 
Toggle 

«/button» 

«on-init xngIf-"display"»«/on-init» 





«h4 class="ui horizontal divider header"» 
OnChange 
«/h4» 


«div class-"ui form"» 
«div class-"field'» 
«label»Name«/label» 
«input type-"text" snamefld value="{{name}}" 
(keyup)2"setValues(namefld, commentfld)"» 
«/div» 


«div class-"field"» 
«label»Comment«/label» 
«textarea (keyup)-"setValues(namefld, commentfld)" 
rows="2" scommentfld»(Í[comment]]«/textarea» 
«/div» 
«/div» 


«on-change [name]-"name" [comment]-"comment"»«/on-change» 


«h4 class-"ui horizontal divider header"» 
DoCheck 
«/h4» 


«do-check» «/do-check» 


«h4 class="ui horizontal divider header"» 
AfterContentInit, AfterViewInit, AfterContentChecked and AfterViewChecked 
«/h4» 


«afters «ngIf-"displayAfters"»«/afters» 

«button class-"ui primary button" (click)-"toggleAfters()"» 
Toggle 

«/button» 
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export class LifecycleSampleApp4 { 
display: boolean; 
displayAfters: boolean; 
name: string; 
comment: string; 


constructor() { 
// OnInit and OnDestroy 
this.display - true; 


// OnChange 
this.name - 'Felipe Coury'; 
this.comment = 'I am learning so much!'; 


// AfterXXX 
this.displayAfters - true; 


setValues(namefld, commentfld) { 
this.name - namefld.value; 
this.comment commentfld.value; 


~ 


toggle(): void 
this.display 


I 


Ithis.display; 
} 


toggleAfters(): void { 
this.displayAfters = !this.displayAfters; 
j 
j 


当 应 用 启动 后 ， 我 们 可 以 看 到 每 个 钩子 都 打印 了 日 志 〈 如 图 14-28 所 示 )。 




















(9 0 9 / guanguar2-Ufecyclehoos x | Felipe | 
& > CD localhost:8080 wsE 
DoCheck 
o Jenny posted a comment 
Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 
B Remove 4 Clear Y 7Uke 
AfterContentlnit, AfterViewinit, AfterContentChecked and AfterViewChecked 
= o NR ES 
民 [] Elements Console Sources Network Timeline Profiles Resources Security Audits 2d. d 0X 
© W «top frame» v E Preserve log 
urner uay suum: , tanes: 7y 
AfterCmd 一 一 -一 一 [constructor] app.ts:236 
On init app.ts:31 
AfterCmd - OnInit app.ts:244 
AfterCmp - DoCheck app.ts:250 
AfterCmp - AfterContentInit app.ts:256 
AfterCmp - AfterContentChecked app.ts:259 
AfterCmp - AfterViewInit app.ts:262 
AfterCmp - AfterViewChecked app.ts:265 
added author with Jenny app.ts:130 
added comment with Ours is a life of constant reruns. We're always circling back to where we'd we started, app.ts:130 











图 14-28 ”应 用 启动 
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现在 我 们 清空 控制 台 并 点 击 Increment 按 钮 ( 如 图 14-29 所 示 )。 


= Leme] 


€ > Œ 0 localhost:8080 ws 


Q CO / B angular 2 - Lifecycle hooks x 














DoCheck 


QU senny posted acomment ie 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 

D Remove 4 Clear V 7Likes 


AfterContentlnit, AfterViewlnit, AfterContentChecked and AfterViewChecked 








民 D | Elements Console Sources Network Timeline Profiles Resources Security Audits ig 
© Ww «top frame» v O Preserve log 
AfterCmd 一 一 [counter] app.ts:240 
AfterCmp - DoCheck app.ts:250 
AfterCmp - AfterContentChecked app.ts:259 
AfterCmp - AfterViewChecked app.ts:265 


> 








Í ————————————— 
图 14-29 ”计数 增加 
可 以 看 到 , 这 次 只 触发 了 DoCcheck 、AfterContentChecked 和 AfterViewChecked 这 三 个 钩子 。 
如 果 点 击 Toggle 按 钮 ， 将 如 图 14-30 所 示 。 

















SO (nouar2- Litecyciehooks x à Felpe | 
> Q [5 localhost:8080 xz 
DoCheck 


QU  sennypostedacomment io 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 


B Remove Æ Clear € 7Likes 


AfterContentlnit, AfterViewlnit, AfterContentChecked and AfterViewChecked 








ROO Elements Console Sources Network Timeline Profiles Resources Security Audits 1 3 
© VY <topframe> v D Preserve log 
AfterCmp - OnDestroy app.ts:247 


> 








图 14-30 ”首次 切换 
接着 再 点 击 一 次 Toggle 按 钮 ， 将 如 图 14-31 所 示 。 
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@ CO /Anouar2- Litecycie hooks x E à | Felipe | 











> Œ [D localhost:8080 E 





DoCheck 


o Jenny posted a comment. : | 


Ours is a life of constant reruns. We're always circling back to where we'd we 
started, then starting all over again. Even if we don't run extra laps that day, we 
surely will come back for more of the same another day soon. 

O Remove 4 Clear 9 7Like 


AfterContentlnit, AfterViewlnit, AfterContentChecked and AfterViewChecked 


Q O Elements Console Sources Network Timeline Profiles Resources Security Audits ix 

© Ww «top frame» v O Preserve log 
AfterCmp - OnDestroy app.ts:247 
AfterCmd --------- [constructor] app.ts:236 
AfterCmd - OnInit app.ts:244 
AfterCmp ~ DoCheck app.ts:250 
AfterCmp - AfterContentInit app.ts:256 
AfterCmp - AfterContentChecked app.ts:259 
AfterCmp - AfterViewInit app.ts:262 
AfterCmp - AfterViewChecked app.ts:265 








图 14-31 再 次 切换 
所 有 钩子 都 被 触发 了 。 


14.6 ”高 级 模板 


template 元 素 是 种 特殊 的 元 素 ， 用 来 创建 可 以 动态 操控 的 视图 。 


为 了 使 template 元 素 用 起 来 更 简单 ， Angular 提 供 了 一 些 语法 糖 来 创建 template 元 素 , 因此 通常 
不 需要 手动 创建 。 


举例 来 说 ， 如 果 我 们 写 : 


«do-check-item 
*ngForz"let comment of comments" 
[comment ] 2" comment " 
(onRemove)-"removeComment ( $event ) "» 
«/do-check-item» 


它 就 会 转换 成 : 


«do-check-item 
template-"ngFor let comment of comments; si-index" 
[comment ] -" comment" 
(onRemove)-"removeComment ( $event ) "» 

«/do-check- item» 


接着 转换 成 : 


«template 
ngFor 
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[ngForOf]="comments" 
let-comment="$implicit" 
let-index="i"> 
<do-check-item 

[comment ] =" comment " 

(onRemove )-2"removeComment ( $event ) "» 
«/do-check- item» 

«/template» 


理解 其 背后 的 概念 很 重要 ， 这 样 我 们 才能 构建 自己 的 指令 。 











14.6.1 Æ5 ngIf: ngBookIf 
我 们 来 创建 一 个 指令 ， 它 和 ngIf 所 做 的 事情 完全 一 样 。 我 们 称 之 为 ngBookIf。 
1. ngBookIf 的 @Directive 
我 们 先 为 这 个 类 声明 epirective 注 解 : 
GDirective(( 
selector: '[ngBookIf]', 


}) 


正如 前 面 所 说 ， 我们 要 使 用 [ngBookIf] 作为 选择 器 。 这 是 因为 当 使 用 xngBookIf= 
"condition" 时 ， 它 会 被 转换 成 : 

«template ngBookIf [ngBookIf]="condition"> 

由 于 ngBookIf 同 时 是 一 个 属性 ， 我 们 还 需要 指出 想 把 ngBookIf 作 为 输入 属性 进行 接收 。 

这 个 指令 要 做 的 是 : 当 条 件 为 真 时 ， 添 加 指令 模板 的 内 容 ; 否则 删除 。 

当 条 件 为 真 时 ， 我 们 就 会 使 用 视图 容器 (view container )。 视 图 容器 是 用 来 给 指令 附加 一 个 
或 多 个 视图 的 。 

视图 容器 可 以 用 来 : 
口 创建 一 个 新 视图 ， 柑 入 我 们 的 指令 模板 ; 
口 清空 视图 容器 内 容 。 

在 使 用 它 之 前 , 需要 注入 ViewContainerRef 和 TemplateRef。 它们 会 注入 指令 的 视图 容器 和 
模板 。 

代码 如 下 所 示 。 


code/advanced components/app/ts/templates/if.ts 









































class NgBookIf { 
constructor(private viewContainer: ViewContainerRef, 
private template: TemplateRef«any») {} 
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有 了 视图 容器 和 模板 的 引用 ,我 们 就 可 以 写 TypeScript 的 属性 设置 器 ( setter ) 了 ,并 且 用 Input() 
注解 表明 它 是 输入 属性 。 


code/advanced components/app/ts/templates/if.ts 


@Input() set ngBookIf(condition) { 
if (condition) { 
this.viewContainer.createEmbeddedView(this.template); 


} 


else { 
this.viewContainer.clear(); 


] 
} 
每 当 设 置 类 的 ngBookIf 属 性 时 ， 这 个 方法 都 会 被 调用 。 也 就 是 说 ， 只 要 ngBookIf= 
"condition" 中 的 condition 发 生变 化 ， 就 会 调用 这 个 方法 。 
现在 ， 如 果 条 件 为 真 ， 就 使 用 视图 容器 的 createEmbeddedView 方 法 来 添加 指令 的 模板 ; 否 
则 使 用 clear 方 法 来 删除 视图 容器 中 的 所 有 内 容 。 
2. 使 用 ngBookIf 


要 想 使 用 这 个 指令 ， 可 以 编写 下 面 的 组 件 。 





























code/advanced components/app/ts/templates/if.ts 


@Component( { 
selector: 'template-sample-app', 
template: ` 
«button class="ui primary button" (click)="toggle()"> 
Toggle 
«/button» 


«div xngBookIf-"display"» 
The message is displayed 
«/div» 


I» 
export class IfTemplateSampleApp { 
display: boolean; 


constructor() ( 
this.display - true; 
} 


toggle() { 
this.display = !this.display; 
} 
} 


运行 应 用 时 ， 可 以 看 到 指令 如 预期 的 一 样 工作 : 当 我 们 点 击 Toggle 按 钮 时 ， 会 在 页 面 中 切换 
显示 消息 This message is displayed。 
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14.6.2 Æ5 ngFor: ngBookRepeat 
现在 再 来 编写 一 个 简易 版 的 ngFor 指 令 ， 用 来 为 指定 的 


1. ngBookRepeat 模 板 解 构 











T 


合 反复 泻 染 模板 。 


我 们 将 通过 xngBookRepeat="let var of collection" 语 法 来 使 用 该 指令 。 


就 像 在 前 一 个 指令 中 所 做 的 那样 ， 我 们 需要 声明 选择 器 [ngBookRepeat]。 不 过 ， 这 里 的 输 
人 参数 并 不 是 只 有 ngBookRepeat。 


如 果 回 头 看 一 下 Angular 是 如 何 转换 ksomething="let var in collection" 标 记 的 ， 就 会 发 
现 该 元 素 展开 后 的 最 终 形 态 等 价 于 : 


«template something [somethingOf]-"collection" let-var="$implicit"> 
《1-- ... -—5 
«/template» 


如 前 所 见 ， 传 入 的 输入 属性 不 是 something， 而 是 something0f。 它 的 值 就 是 我 们 的 指令 要 
接收 并 人 迭代 的 集合 。 
对 于 生成 的 模板 ， 我 们 将 使 用 局 部 视图 变量 #var , 它 会 从 局 部 变 量 $implicit 接 收 值 。 当 


Angular 对 语法 糖 进行 展开 时 ,会 将 一 个 局 部 变量 放 到 模板 中 。 这 个 局 部 变量 的 名 称 就 是 
$implicit, 

























































































2. ngBookRepeat 的 @Directive 
该 开始 编写 这 个 指令 了 。 首 先 来 写 指令 的 注解 。 


code/advanced components/app/ts/templates/for.ts 


@Directive({ 
selector: '[ngBookRepeat]' 


}) 
3. ngBookRepeat 类 
然后 编写 组 件 类 。 


code/advanced components/app/ts/templates/for.ts 








class NgBookRepeat implements DoCheck { 
private items: any; 
private differ: IterableDiffer; 
private views: Map«any, ViewRef» = new Map«any, ViewRef»(); 


constructor(private viewContainer: ViewContainerRef, 
private template: TemplateRef«any», 
private changeDetector: ChangeDetectorRef, 
private differs: IterableDiffers) {} 


我 们 为 类 声明 了 一 些 属性 : 





图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


14.6 ”高 级 模板 395 





O items 保 存 我 们 要 迭代 的 集合 ; 


Hs 
口 di ffer 是 一 个 IterableDiffer 对 象 (已 经 在 14.5 节 学 过 
口 views 是 一 个 Map， 它 将 把 集合 中 给 





)， 用 于 变更 检测 ; 
从 出 的 条 目 和 包含 它 的 视图 链接 起 来 。 


构造 函数 会 接收 viewContainer S template 和 一 个 IterableDi ffers 实 例 ( 全 部 参数 都 在 本 
章 的 前 面 讨论 过 )。 


























I 








fe FOR ELI LIE DEAE EUR s 我们 会 在 下 一 节 中 深入 讲解 变更 检测 器 , ME EUR 
它 理解 为 Angular 创 建 的 类 ， 用 来 在 指令 属性 发 生变 化 时 触发 检测 动作 。 


下 一 步 是 编写 设置 hgBookRepeat0f 属 性 时 要 触发 的 代码 。 


























code/advanced components/app/ts/templates/for.ts 


GInput() set ngBookRepeatOf(items) { 
this.items - items; 


if (this.items && !this.differ) { 
this.differ - this.differs.find(items).create(this.changeDetector); 
j 












































} 
当 设 置 该 属性 时 ， 我 们 将 此 集合 保存 在 指令 的 item 属 性 中 。 如 果 集 合 是 有 效 的 并 且 还 没有 
differ 的 话 ， 就 创建 一 个 differ。 
要 做 到 这 一 点 , 我 们 创建 一 个 IterableDiffer 类 的 实例 。 它 可 以 复 用 指令 的 变更 检测 器 (已 
经 在 构造 也 RUN 过 了 )。 


接 下 来 就 要 编写 对 集合 的 变化 作出 响应 的 代码 了 。 为 此 ， 我 们 要 实现 下 面 的 ngDoCheck 方 法 
来 实现 Docheck 生 命 周 期 钩子 。 


code/advanced components/app/ts/templates/for.ts 
ngDoCheck(): void { 
if (this.differ) { 


let changes = this.differ.diff(this.items); 
if (changes) { 


changes.forEachAddedItem((change) => { 

et view = this.viewContainer.createEmbeddedView(this.template 
['$implicit': change.item]); 
this.views.set(change.item 
DE 
changes. forEachRemovedItem((change) => { 

et view - this.views.get(change.item); 
et idx - this.viewContainer.indexOf(view); 
this.viewContainer.remove(idx); 
this.views.delete(change.item); 
DE 

j 

j 

j 


, View); 
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我 们 来 分 解 一 下 这 段 代 码 。 在 这 个 方法 中 ， 我 们 做 的 第 一 件 事 就 是 确保 differ 已 经 实例 化 了 。 
如 果 没 有 ， 那 我 们 就 不 做 任何 事 。 

接 下 来 ， 询 问 differ 哪 些 东西 发 生 了 变化 。 如 果 有 变化 ， 就 用 changes . forEachAddedItem 方 
法 来 遍历 所 有 新 增 项 。 对 于 每 个 添加 进来 的 元 素 ， 该 回调 方法 将 接收 一 个 CollectionChange- 
Record 对 象 。 

对 于 每 个 元 素 ， 都 使 用 视图 容器 的 createEmbeddedView 方 法 来 创建 一 个 新 的 上 钻 入 视图 . 


let view = this.viewContainer.createEmbeddedView(this.template, {'$implicit': change.item]); 


createEmbeddedView 方 法 的 第 二 个 参数 是 视图 的 上 下 文 。 在 这 个 例子 中 ， 我 们 把 局 部 变量 
$implicit 设 置 为 cnange.item。 这 样 就 可 以 访问 视图 里 在 x*ngBookRepeat="let var of 
collection" 中 声明 的 var 变量 了 。 也 就 是 说 ， let var 中 的 var 就 是 $implicit 变量 。 使 用 
$implicit 是 因为 当 我 们 写 这 个 组 件 时 还 不 知道 用 户 会 给 它 起 什么 名 字 。 


最 后 ,我 们 要 把 集合 中 的 条 目 和 视图 关联 起 来 。 背后 的 原因 是 ,如 果 从 集合 中 删除 了 一 个 条 
目 ， 也 需要 删除 相应 的 视图 。 这 就 是 接 下 来 我 们 要 做 的 。 


对 于 从 集合 中 删除 的 每 一 个 条 目 , 我 们 都 要 根据 集合 条 目 到 视图 的 映射 找到 视 图 , 并 查询 该 
视图 在 视图 容器 中 的 索引 。 这 是 因为 视图 容器 的 remove 方 法 需要 一 个 索引 。 最 后 ,还 要 从 集合 条 
目 到 视图 的 映射 中 删除 这 个 视图 。 


4. 试用 这 个 指令 
要 测试 这 个 指令 ， 可 以 编写 如 下 组 件 。 






































































































































code/advanced components/app/ts/templates/for.ts 


GComponent( { 
selector: 'template-sample-app', 
template: ^ 
«ul» 
«li xngBookRepeat-"let p of people"» 
{{ p.name jj is (( p.age 3] 
«a href (click)z"remove(p) "»Remove«/a» 
«/li» 
«/ul» 


«div class-"ui form"> 
«div class-"fields"» 
«div class-"field"» 
«label»Name«/label» 
«input type="text" «name placeholder-z"Name"» 
«/div» 
«div class-"field"» 
«label»Age«/label» 
«input type="text" sage placeholder-"Age"» 
«/div» 
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«/div» 
«/div» 
«div class-z"ui submit button" 
(click)-2"add(name, age)"» 
Add 
«/div» 
I» 
export class ForTemplateSampleApp { 


people: any[]; 


constructor() { 

this.people - [ 
name: 'Joe', age: 10}, 
name: 'Patrick', age: 21], 
name: 'Melissa', age: 12], 
name: 'Kate', age: 19] 





| 
} 


remove(p) f 
let idx: number - this.people.indexOf(p); 
this.people.splice(idx, 1); 
return false; 


j 


add(name, age) { 
this.people.push(([name: name.value, age: age.value]); 
name.value = ''; 


, 
ry 


age.value = A 
j 
j 


我 们 使 用 指令 来 遍历 人 员 列 表 。 


code/advanced components/app/ts/templates/for.ts 
«ul» 
«li «ngBookRepeat-"let p of people"» 


(( p.name }} is (( p.age }} 
«a href (click)z"remove(p)"»Remove«/a» 


«/li» 
«/ul» 


当 点 击 Remove 按 钮 时 ， 我 们 将 该 条 目 从 集合 中 删除 并 触发 变更 检测 。 
我 们 还 提供 了 一 个 表单 ， 可 以 用 它 向 集合 中 添加 条 目 。 


code/advanced components/app/ts/templates/for.ts 











«div class-"ui form"» 
«div class-"fields"» 
«div class-"field'» 
«label»Name«/label» 
«input type="text" «name placeholderz"Name"» 
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«/div» 
«div class-"field"» 
«label»Age«/label» 
«input type="text" sage placeholder-"Age"» 
«/div» 
«/div» 
«/div» 


«div class-"ui submit button" 
(click)2"add(name, age)"» 
Add 
«/div» 


14.7 ”变更 检测 
在 用 户 与 我 们 的 应 用 交互 时 ， 数 据 (state) 会 发 生 改 变 ， 我们 的 应 用 需要 据 此 作出 响应 。 
任何 现代 JavaScript 框 架 都 需要 解决 的 一 大 问题 就 是 :怎样 才能 知道 发 生 了 变化 并 据 此 重新 泻 
染 组 件 ? 
为 了 证 视图 可 以 响应 组 件 状 态 的 变化 ，Angular 使 用 了 变更 检测 。 
什么 可 以 触发 组 件 状态 的 改变 ? 最 明显 的 就 是 用 户 交 互 。 比 如 ， 如 果 我 们 有 这 样 一 个 组 件 : 
GComponent( f 
selector: 'my-component', 
template: ^ 


Name: {{name}} 
«button (click)z"changeName( ) "»Change! «/button» 






































}) 


class MyComponent { 
name: string; 
constructor() { 
this.name = 'Felipe'; 


J 


changeName() { 
this.name - 'Nate'; 
j 
j 


可 以 看 到 ， 当 用 户 点 击 Change! 按 钮 时 ， 组 件 的 name 属 性 会 发 生 改 变 。 
另 一 个 变化 的 来 源 可 能 是 HITP 请 求 : 


GComponent( { 
selector: 'my-component', 
template: ^ 
Name: {{name}} 


























}) 


class MyComponent { 
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name: string; 
constructor(private http: Http) { 
this.http.get('/names/1') 
.map(res => res. json()) 
.subscribe(data -» this.name - data.name); 
} 
} 


最 后 ， 我 们 还 可 以 用 计时 器 来 触发 变化 : 


GComponent ( f 
selector: 'my-component', 
template: ^ 
Name: {{name}} 


I» 
class MyComponent { 
name: string; 
constructor() { 
setTimeout(() => this.name = 'Felipe', 2000); 


j 
】 


但 是 Angular 要 如 何 察觉 到 这 些 变化 呢 ? 

首先 要 知道 的 是 ， 每 个 组 件 都 有 自己 的 变更 检测 需 。 

就 像 我 们 之 前 看 到 的 ,一 个 典型 的 应 用 有 很 多 组 件 , 组 件 之 间 会 进行 交互 ， 从 而 创建 一 个 如 
14-32 所 示 的 依赖 关系 树 。 





= — 


JOR 
ma y 
me m 


对 于 树 中 的 每 个 组 件 , 都 会 创建 一 个 变更 检测 器 。 因此, 我 们 的 变更 检测 器 同样 是 一 棵 树 ( 如 
14-33 所 示 )。 
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| 变更 检测 器 





i 
| T 





| 变更 检测 器 | 


变更 检测 器 变更 检测 器 变更 检测 器 
变更 检测 器 变更 检测 器 


| 变更 检测 器 变更 检测 器 


图 14-33 ”变更 检测 器 树 


当 一 个 组 件 发 生变 更 时 , 无 论 它 在 树 的 什么 位 置 ， 都 会 触发 树 中 的 所 有 变更 检测 器 。 这 是 因 
为 Angular 会 从 顶部 节点 开始 ， 一 直 扫描 到 树 的 叶子 节点 〈 如 图 14-34 所 示 )。 


I 
























Aam 


= uw 
— ER 


图 14-34 ”默认 的 变更 检测 方式 











图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


14.7 ”变更 检测 401 








在 上 面 的 图 中 , 深 灰 色 的 组 件 发 生 了 变化 。 但 是 ,正如 我 们 所 见 ， 它 触发 了 整 棵 组 件 树 中 的 
检查 。 被 检查 的 组 件 用 浅 灰 色 表 示 〈 注 意 ， 引 起 变化 的 组 件 本 身 也 被 检查 了 )。 
觉 上 ,你 可 能 会 认为 这 种 方式 的 开销 非常 大 ; 然而 实际 上 ， 由 于 经 过 大 量 的 优化 ( 这 使 得 
Angular 代 码 可 以 被 JavaScript 引 擎 进一步 优化 )， 它 的 速度 快 得 惊人 。 

















14.7.1 自 定 义 变更 检测 


有 时 ,默认 的 变更 检测 机 制 可 能 有 些 大 材 小 用 。 比 如 ,你 可 能 使 用 了 不 可 改变 对 象 或 者 应 用 
的 数据 架构 是 依赖 可 观察 对 象 的 。 在 这 些 场景 下 ，Angular 提 供 了 可 以 自 定义 变更 检测 系统 的 机 
制 ， 可 以 使 检测 变 得 非常 快 。 

修改 变更 检测 器 行为 的 第 一 种 方式 是 告诉 组 件 : 只 有 当 它 的 输入 属性 值 发 生 改 变 时 才 需 要 去 
检查 。 

简单 来 说 ， 输 入 属性 值 就 是 组 件 从 外 部 接收 的 属性 。 比 如 ， 在 这 段 代码 中 : 


class Person { 
constructor(public name: string, public age: string) {} 


} 





















































@Component({ 
selector: 'mycomp', 
template: ^ 
«div» 
«span class-"name"»í(person.name]«/span» 
is (person.age] years old. 
«/div» 
I» 
class MyComp { 
GInput() person:Person; 


} 


我 们 有 一 个 输入 属性 person。 ME, 如 果 只 想 在 输入 属性 发 生变 化 时 才 让 组 件 改 变 , 只 要 修 
改变 更 检测 策略 ， 把 changeDetection 设 置 成 ChangeDetectionStrategy .OnPush 就 可 以 了 。 





























e 顺便 一 提 ,changeDetection 的 默认 值 是 ChangeDetectionStrategy.Default。 











我 们 写 两 个 组 件 来 做 个 小 实验 。 第 一 个 组 件 使 用 默认 的 变更 检测 行为 , 而 另外 一 个 组 件 使 用 Cc 
OnPush & IE ~ 


code/advanced components/app/ts/change-detection/onpush.ts 


import { 
Component, 
Input, 
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ChangeDetectionStrategy, 
) from 'Gangular/core'; 


class Profile { 
constructor(private first: string, private last: string) {} 


lastChanged() { 
return new Date(); 
} 

} 

我 们 先导 入 一 些 东 西 ， 然 后 声明 Person 类 。 Person 类 会 会 作为 这 两 个 组 件 的 输入 属性 。 注 意 ， 
我 们 还 在 Profile 类 中 创建 了 一 人 个 方法 非常 有 用 ,可 以 决定 何 时 触发 变 
更 检测 。 当 把 一 个 给 定 的 组 件 标 记 为 需要 检查 时 ， 这 个 方法 就 会 被 调用 ,然后 呈现 在 模板 中 。 因 
此 ， 该 方法 可 以 准确 地 表明 组 件 的 最 后 检查 时 间 。 


接 下 来 ,我 们 声明 了 pefaultcmp 组 件 ， 它 将 使 用 默认 变更 检测 策略 。 














code/advanced components/app/ts/change-detection/onpush.ts 


GComponent( { 
selector: 'default', 
template: ^ 
«h4 class="ui horizontal divider header"» 
Default Strategy 
«/h4» 


«form class-"ui form"» 

«div class-"field'» 
«label»First Name«/label» 
«input 

type="text" 
[(ngModel)]2"profile.first" 
name-"first" 
placeholderz"First Name"» 

«/div» 

«div class-"field'» 

«label»Last Name«/label» 
«input 
type="text" 
[(ngModel )]="profile.1last" 
name="1as 七 " 
placeholder="Last Name"» 
«/div» 
</form> 
<div> 

{{profile.lastChanged() | date:'medium'}} 

</div> 


}) 

export class DefaultCmp { 
@Input() profile: Profile; 

j 
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第 二 个 组 件 使 用 onPush 策 略 。 


code/advanced components/app/ts/change-detection/onpush.ts 





NU 


GComponent ( f 
selector: 'on-push', 
changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 
«h4 class="ui horizontal divider header"» 
OnPush Strategy 
«/h4» 


«form class-"ui form"» 

«div class-"field'» 
«label»First Name«/label» 
«input 

type="text" 

[(ngModel )]="profile.first" 

name=" first" 

placeholder="First Name"> 
</div> 

<div class="field"> 
<label>Last Name«/label» 
<input 

type="text" 
[(ngModel )]="profile.last" 
name="last" 
placeholder="Last Name"» 
</div> 
</form> 
<div> 

{{profile.lastChanged() | date:'medium'}} 

</div> 


D) 


export class OnPushCmp { 
GInput() profile: Profile; 
j 


正如 我 们 所 见 ， 两 个 组 件 使 用 相同 的 模板 。 唯 一 不 同 的 就 是 注解 中 的 变更 检测 策略 。 
最 后 ， 我 们 添加 一 个 组 件 来 并 排 泻 染 两 个 组 件 。 


code/advanced components/app/ts/change-detection/onpush.ts 























GComponent ( f 
selector: 'change-detection-sample-app', 
template: 
«div class-"ui page grid"» 
«div class-z"two column row"» 
«div class="column area"» 
«default [profile]-"profile41"»«/default» 
«/div» 
«div class-"column area"» 
«on-push [profile]-"profile2"»«/on-push» 
«/div» 
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«/div» 
«/div» 


}) 
export class OnPushChangeDetectionSampleApp { 


profilei: Profile - new Profile('Felipe', 'Coury'); 
profile2: Profile - new Profile('Nate', 'Murray'); 


j 
运行 这 个 应 用 时 ， 我 们 会 看 到 两 个 组 件 如 图 14-35 这 样 被 泻 染 出 来 。 
W Angular 2 - Change detec! x Felipe 





CŒ D localhost:56909 


ei Angular 2 Advanced Components 


Default Strategy OnPush Strategy 


First Name First Name 


Felipe Nate 
Last Name Last Name 
Murray 


Mar 20, 2016, 6:19:51 PM 


Coury 


Mar 20, 2016, 6:19:51 PM 


图 14-35 ”默认 策略 与 onPush 策 略 
当 我 们 更 改 左边 的 组 件 ( 使 用 默认 策略 ) 时 , 可 以 注意 到 右边 组 件 的 时 间 惟 并 没有 发 生 改 变 ， 
如 图 14-36 所 示 。 





O O / P angular 2- Change detec: x 
ye 





> Œ D localhost:56909 





g.-- Angular 2 Advanced Components 


OnPush Strategv 





First Name First Name 

Carlos Ari 
Last Name Last Name 

Taborda Lerner 

A 
改变 这 个 组 件 人 
这 个 组 件 被 检查 了 
但 是 这 个 没有 








图 14-36 ”上 默认 的 组 件 变 化 时 ，onPush 的 组 件 不 会 检查 
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要 理解 为 何如 此 ， 我 们 来 检查 下 这 个 新 的 组 件 树 ( 如 图 14-37 所 示 )。 


ChangeDetectionSampleApp 
DefaultCmp OnPushCmp 


图 14-37 ”新 组 件 树 


Angular 对 于 变化 的 检查 是 自 上 而 下 的 ， 所 以 首先 查询 的 是 ChangeDetectionSampleApp fA 
后 是 DefaultCcmp ， 最 后 是 onPushcmp 。 当 它 推测 出 onPushcmp 发 生变 化 时 ， 就 会 自 上 而 下 地 更 新 


























组 件 树 中 的 所 有 组 件 ， 这 会 导致 重新 泻 染 DefaultCmp。 
当 我 们 改变 右边 组 件 的 值 时 ， 如 图 14-38 所 示 。 








@©® / P angular 2- Change detec: x 





> Œ [D localhost:56909 


g.-- Angular 2 Advanced Components 


OnPush Strategy 


Default Strategy 
First Name 
Felipe 


Last Name 





Coury 


; 
= 改变 这 个 组 件 


Mar 20, 2016, 6:25:27 PM 





两 个 值 都 发 生 了 改变 
———————— 
图 14-38 ”OnPush 的 组 件 变 化 时 ， 默 认 的 组 件 也 会 检查 


变更 检测 引擎 生效 后 ， 只 检查 了 pefaultcmp 组 件 而 没有 检查 onPushcmp 。 这 是 因为 当 我 们 为 
组 件 设置 了 OnPush 策 略 时 , 只 有 它 自 己 的 输入 发 生变 化 时 才 执 行 检测 。 改变 组 件 树 中 的 其 他 组 件 











时 并 不 会 触发 这 个 组 件 变更 检测 需 。 


14.7.2 Zones 
在 底层 ，Angular 使 用 了 一 个 名 叫 Zones 的 类 库 ， 它 可 以 自动 检测 变化 并 触发 变更 检测 机 制 。 
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在 一 些 最 常见 的 情景 下 ，Zones 会 自动 告诉 Angular 发 生 了 某 些 变化 : 
O 当 DOM 事 件 发 生 时 ( 比如 click 、change 等 ); 

口 当 HTTP 请 求 完 成 时 ; 

O 当 定 时 融 被 触发 时 (setTimeout 或 setInterval )。 








然而 ， 还 有 一 些 场景 是 Zones 无 法 自动 识别 出 变化 的 。 在 这 些 场景 下 ，onPush 策 略 就 会 变 得 
非常 有 用 。 


下 面 是 一 些 Zones 无 法 掌控 的 例子 : 


口 使 用 异步 方式 运行 第 三 方 类 库 ; 
a 不 可 变 的 数据 ; 
Q 可 观察 对 象 。 


在 这 些 情况 下 , 非常 适合 通过 

















过 OnPush 以 及 一 点 小 技巧 去 手动 提示 Angularx 有 东西 发 生 了 变化 。 
14.7.3 ”可 观察 对 象 和 OnPush 


我 们 来 编写 一 个 组 件 , 它 接收 一 个 可 观察 对 象 作为 参数 。 每 当 从 这 个 可 观察 对 象 中 接收 到 值 
时 ， 我 们 就 会 增加 组 件 的 计数 器 属性 


£o 











如 果 使 用 常规 的 变更 检测 策略 ， 那 么 只 要 我 们 增加 计数 ，Angular 就 会 触发 变更 检测 PA, 
个 组 件 将 使 用 onPush 策 略 ， 只 有 当 计 数 是 5 的 倍数 或 者 可 观察 对 象 完成 时 ， 我 们 才 让 变更 检测 
器 生 效 ， 而 不 是 每 次 增加 计数 时 都 触发 变更 检测 需 


要 做 到 这 一 点 ， 我 们 来 写 个 组 件 。 








code/advanced components/app/ts/change-detection/observables.ts 
import { 

Component, 

Input, 

ChangeDetectorRef, 

ChangeDetectionStrategy 
) from 'Gangular/core'; 


import { Observable } from 'rxjs/Rx'; 


GComponent( f 
selector: 'observable', 


changeDetection: ChangeDetectionStrategy .OnPush, 
template: ^ 
«div» 


«div»Total items: [[counter]])«/div» 
«/div» 


}) 


export class ObservableCmp { 
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GInput() items: Observable«number»; 
counter = 0; 


constructor(private changeDetector: ChangeDetectorRef) { 


j 


ngOnInit() ( 
this.items.subscribe((v) => ( 
console.log('got value', v); 
this.counterc-; 
if (this.counter % 5 == 0) ( 
this.changeDetector .markForCheck( ) ; 


j 








}, 
null, 
O= { 
this .changeDetector .markForCheck(); 
1) 
} 
} 


我 们 将 代码 分 解 来 看 ， 以 确保 理解 正确 。 首 先 ， 我 们 声明 该 组 件 接 收 items 作 为 输入 属性 并 
使 用 onPush 作 为 变更 检测 策略 。 


code/advanced components/app/ts/change-detection/observables.ts 











@Component({ 
selector: 'observable', 
changeDetection: ChangeDetectionStrategy.OnPush, 
template: ^ 
«div» 
«div»Total items: [[counter])«/div» 
«/div» 


}) 
接 下 来 ,我 们 把 输入 属性 存储 在 组 件 类 的 items 属 性 中 ， 然 后 设置 男 一 个 属性 counter 为 0。 











code/advanced components/app/ts/change-detection/observables.ts 


export class ObservableCmp { 
@Input() items: Observable«number»; 
counter = 0; 


然后 ， 我 们 使 用 构造 函数 来 取得 组 件 的 变更 检测 需 。 


code/advanced components/app/ts/change-detection/observables.ts 





constructor(private changeDetector: ChangeDetectorRef) { 


j 
HG. MAWAR, fEngonInitfg T rer P rz. 


code/advanced components/app/ts/change-detection/observables.ts 
ngOnInit() ( 
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this.items.subscribe((v) => ( 
console.log('got value', v); 
this.counter++; 
if (this.counter % 5 == 0) { 
this.changeDetector .markForCheck(); 
j 
), 


null, 
Qt 
this.changeDetector .markForCheck(); 
D» 
j 
我 们 订阅 了 可 观察 对 象 。subscribe 方 法 接收 三 个 回调 函数 : onNext , onError 和 


onCompleted, 


onNext 回调 函数 会 打印 出 我 们 得 到 的 值 ， 然 后 增加 计数 。 最 后 ， 如 果 当 前 计数 需 的 值 是 5 的 
倍数 ， 我 们 就 调用 变更 检测 器 的 markForcheck 方 法 。 只 要 我 们 想 告 诉 Angular 已 经 发 生 了 变化 ， 
就 可 以 使 用 这 个 方法 ， 从 而 使 变更 检测 恬 生 效 。 


对 于 onError 回 调 函 数 ， 我 们 传人 了 nul1。 这 表示 我 们 不 想 处 理 这 个 场景 。 


最 后 ， 对 于 oncomplete 回 调 函 数 ， 我 们 同样 触发 了 变更 检测 器 ， 所 以 最 终 的 计数 器 可 以 被 
显示 出 来 。 


现在 来 看 应 用 组 件 的 代码 。 它 会 创建 订阅 者 。 











code/advanced components/app/ts/change-detection/observables.ts 


@Component( { 
selector: 'change-detection-sample-app', 
template: ^ 
«observable [items]-"itemObservable"»«/observable» 


I» 
export class ObservableChangeDetectionSampleApp { 
itemObservable: Observable«number»; 


constructor() { 


this.itemObservable - Observable.timer(100, 100).take(101); 
j 
j 


面 这 行 代 码 很 重要 : 
this.itemObservable = Observable.timer(100, 100).take(101); 
这 一 行 创 建 了 一 个 i la L 察 对 象 ， 我 们 会 通过 items 输 入 属性 将 这 个 可 观察 对 象 传递 进 组 件 。 


timer 方 法 有 两 个 参数 : 第 一 个 是 等 待 的 毫秒 数 ， 第 二 个 是 间隔 的 毫秒 数 。 因 此 ， 这 个 可 观察 对 
象 会 创建 一 系列 的 值 。 
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因为 我 们 不 需要 一 直 创建 下 去 ， 所 以 使 用 了 take 函 数 ， 只 绪 取 前 101 个 值 。 
这 段 代码 时 ， 会 发 现 每 取 到 5 个 值 才 会 更 新 一 次 计数 器 ， 并 且 生 成 了 一 个 最 终 值 


E A 




















MZ AES HIS 
当 我 们 运行 
101 ( 如 图 14-39 所 示 )。 
© 0 O / Wanguar2-Changedetec: x 2 | Felipe | 
€ > C [D localhost:8080 - —— zz 
g.-- Angular 2 Advanced Components 
Total items: 101 
[x à] Elements Console Sources Network Timeline Profiles Resources Security » 0142 x 
© Ww top 了 Preserve log 
got value 97 app.ts:28 
got value 98 app.ts:28 
got value 99 app.ts:28 
got value 100 app.ts:28 
>| 
tii 


图 14-39 手动 触发 变更 检测 


14.8 总 结 
Angular 为 我 们 提供 了 许多 可 以 用 来 编写 高 级 组 件 的 工具 。 使 用 本 章 的 这 些 技术 ， 你 几乎 能 


写 出 任何 想 要 的 组 件 功能 。 

然而 ， 在 高 级 组 件 中 还 有 一 个 重要 的 概念 ， 那 就 是 依赖 注入 。 

使 用 依赖 注入 ， 我 们 可 以 让 组 件 和 系统 中 的 很 多 其 他 部 分 挂 接 起 来 。 第 8 章 详 细 讨论 了 什么 
是 依赖 注入， 如 何在 应 用 中 使 用 它 ， 以 及 注入 服务 的 常用 模式 。 





图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) EF 尊重 版 权 





测试 























经 过 夜以继日 的 奋战 , 终于 熬 到 可 以 对 外 发 布 的 日 子 了 。 是 时 候 让 过 去 投入 的 大 量 精力 和 时 
间 得 到 回报 了 。 然 而 ， 传 来 的 一 个 消息 犹如 上 畏 天 霹雳 : 一 个 致命 的 bug 导 致 用 户 无 法 注册 。 


15.1 测试 驱动 ? 


测试 能 够 防 患 于 未 然 ， 提 升 对 程序 的 信心 ,也 可 以 为 新 加 入 的 开发 人 员 提供 指引 。 在 软件 开 
发 领域 ， 几 乎 没 人 质疑 测试 的 作用 。 但 是 ， 人 们 在 如 何 测试 这 个 问题 上 一 直 争 论 不 休 。 

一 种 方法 是 先 写 测试 ， 再 写实 现 过 程 ， 直 至 测试 通过 ; 另 一 种 是 已 有 实现 代码 ， 再 写 测 试 ， 
验证 代码 是 否 正 确 。 令 人 不 解 的 是 ， 二 者 的 合理 性 常 在 开发 社区 中 引发 口水 战 。 双 方 伪 持 不 下 ， 
争论 哪个 才 是 正确 的 方法 。 

基于 以 往 的 经 验 , 尤其 是 在 严重 依赖 原型 的 情况 下 ,我 们 将 重点 放 在 构建 可 测试 代码 上 。 我 
们 发 现 , 即使 你 的 经 历 有 所 不 同 , 但 是 在 构建 原型 时 ,测试 可 能 经 常 变更 的 代码 片断 会 比 让 它 运 
行 起 来 耗费 2~3 倍 的 工作 量 。 与 此 相反 ， 我 们 在 构建 基于 小 型 组 件 的 应 用 程序 时 ， 将 大 量 功能 分 
解 成 不 同 的 方法 ， 从 而 测试 整个 蓝图 的 部 分 功能 。 这 就 是 我 们 所 说 的 可 测试 代码 。 



































c 





o 一 种 替代 构建 原型 ( 后 测试 ) 的 方法 论 便 是 所 谓 的 “红色 一 绿色 一 重 构 ”?。 它 

的 理念 是 要 求 你 先 写 测试 。 运 行 测试 会 得 到 失败 结果 (红色 )， 因 为 你 还 没有 
写 任何 实现 的 代码 。 只 有 在 测试 失败 之 后 ， 才 去 写实 现代 码 ， 直 至 所 有 测试 通 
it (绿色)。 


当然 ， 测 试 什么 取决 于 你 和 你 的 团队 ， 而 本 章 的 重点 在 于 讨论 如 何 测试 程序 。 





(D Red-Green-Refactor， 是 一 种 标准 的 测试 驱动 开发 流程 。 一 一 译 者 注 





图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


15.3 ”测试 工具 411 





15.2 ” 端 对 端 测试 与 单元 测试 
测试 程序 有 两 种 主要 方法 : 端 对 端 测试 和 单元 测试 


如 果 使 用 自 上 而 下 的 方法 进行 测试 ,那么 写 测试 时 就 将 程序 视 为 一 个 “ 黑 盒 ”。 与 程序 交互 
从 “旁观 者 ”的 角度 评判 程序 是 否 达标 。 这 种 自 上 而 下 的 测试 技巧 被 称 为 端 


x] 35 M 33 














在 Angular 中 ， 最 常用 的 工具 叫 作 Protractor 。Protractor 能 够 打开 浏览 器 与 程序 
交互 ， 收 集 测试 结果 ， 并 检验 测试 结果 与 预期 值 是 否 相符 。 





第 二 种 常用 的 测试 方法 是 隔离 程序 的 每 个 部 件 , 在 隔离 环境 中 运行 测试 。 这 种 测试 形式 叫 作 
单元 测试 。 

在 单元 测试 中 ， 所 写 的 测试 需要 
确定 它 是 否 与 我 们 的 预期 结果 匹配 。 

在 本 章 中 ， 我 们 将 会 探讨 如 何 对 Angular 程 序 进 行 单元 测试 。 





帮 先 提供 既定 的 输入 值 与 相应 的 逻辑 单元 ， 检 测 输出 结果 ， 


iini 





15.3 测试 工具 
为 了 测试 程序 ， 我 们 将 用 到 两 种 工具 : Jasmine 和 Karma。 








15.3.1 Jasmine 

Jasmine? 是 一 种 用 于 测试 JavaScript 代 码 的 行为 驱动 框架 。 

利用 Jasmine， 你 可 以 设置 代码 在 调用 后 的 预期 结 

比如 ， 我 们 假定 calculator 对 象 有 一 个 sum 函 数 。 想 确保 1 加 1 的 结果 为 2， 就 可 以 用 一 个 测 
TX (也 叫 规格 ，spec ) 来 表达 。 使 用 以 下 代码 : 


describe('Calculator', () => { 
it('sums 1 and 1 to 2', () => { 
var calc - new Calculator(); 
expect(calc.sum(1, 1)).toEqual(2); 
Ip 
D); 


使 用 Jasmine 的 一 个 优点 是 代码 易于 阅读 。 从 以 上 代码 可 以 看 到 ， 我 们 期 望 calc sum 的 结果 a5 


























(D https://angular.github.io/protractor/#/ 
© http://jasmine.github.io/2.4/introduction.html 
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等 于 2。 

测试 通常 由 多 个 describe 块 和 it 块 组 成 。 

通常 , 我 们 用 describe 来 组 织 要 测试 的 逻辑 单元 , 对 于 其 内 部 每 个 要 使 用 断言 的 预期 都 会 用 
到 一 个 it 块 。 然 而 ， 这 并 不 是 一 个 人 硬性 规定 。 你 会 经 常 看 到 一 个 it 块 包含 多 个 预期 。 

在 上 述 calculator 示 例 中 ， 我 们 只 是 列举 了 一 个 简单 的 对 象 。 正 因为 如 此 ， 整 个 类 只 使 用 
了 一 个 describe 块 ， 而 每 个 方法 使 用 一 个 it 块 。 

大 多 数 情 况 下 并 非 如 此 。 比 如 ， 某 些 方法 会 根据 不 同 输入 值 产生 不 同 结果 , 那么 这 些 方法 可 
以 拥有 多 个 相应 的 让 块 。 在 这 种 情况 下 ， 最 好 使 用 和 能 套 的 describe 块 : 对 象 级 别 用 一 个 ， 每 个 
方法 也 各 用 一 个 ， 然 后 在 其 内 部 的 每 个 断言 语句 用 一 个 单独 的 it 块 包 衰 。 

大 量 有 关 describe 块 和 it 块 的 示例 将 贯穿 本 章 。 不 必 烦 恼 到 底 该 用 describe 块 还 是 it 块 ， 
我 们 将 用 大 量 示例 演示 说 明 。 

更 多 有 关 Jasmine 和 其 语法 的 资料 ， 参 见 Jasmine 官 方 文档 : http://jasmine.github.io/2.4/ 


introduction.html。 





















































15.3.2 Karma 


使 用 Jasmine ， 我 们 可 以 描述 测试 和 预期 结果 。 要 运行 测试 ， 还 需要 为 测试 提供 一 个 浏览 器 
环境 。 

Karma 应 运 而 生 。 使 用 Karma, 我 们 可 以 在 Chrome 或 Firefox 之 类 的 真实 浏览 器 或 者 PhantomJS 
这 样 的 空 壳 浏 览 器 ( 无 用 户 界面 ) 内 运行 JavaScript 代 码 。 











15.4 ”编写 单元 测试 
本 节 的 重点 是 理解 如 何 对 一 个 Angular 程 序 的 各 个 部 件 进行 单元 测试 。 


我 们 将 会 学 习 如 何 测试 服务 、 组 件 、HTTP 请 求 等 。 同 时 ,我 们 也 会 收获 一 些小 技巧 ， 让 代 
码 更 容易 测试 。 





15.5 Angular 单元 测试 框架 


Angular 自 身 提供 了 一 套 基 于 Jasmine 框 架 的 辅助 类 ， 用 以 帮助 我 们 编写 单元 测试 。 


主要 的 测试 框架 位 于 @angular/core/testing 包 中 。( 然而 ,为 了 测试 组 件 ， 我们 会 用 到 
@angular/compiler/testing 包 和 @angular/platform-browser/testing 包 中 的 些 辅 助 类 , 稍 
后 具体 介绍 。) 
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A 如 果 这 是 你 初次 测试 Angular 程 序 , 那么 在 为 Angular 写 单元 测试 时 ， 需 要 先 完 成 
一 些 必 要 的 设置 步骤 。 
例如 ， 在 需要 注入 依赖 时 ， 我 们 经 常 手 动 配置 它们 。 在 测试 一 个 组 件 时 ， 需 要 
使 用 测试 辅助 类 初始 化 它们 。 在 测试 路 由 时 ， 还 需要 构建 一 些 依赖 。 
设置 有 些 繁琐 ， 但 不 用 太 担 心 。 一 旦 掌握 ， 你 就 会 发 现 从 一 个 项 目 切换 到 另外 
一 个 项 目 ， 配 置 不 会 有 多 大 变化 。 另 外 ， R*LASIARRAS—E. 
和 往常 一 样 ， 可 以 在 代码 下 载 页 面 获 取 本 章 所 有 的 源 代 码 。 用 你 喜欢 的 编辑 器 
直接 打开 浏览 ， 可 以 对 本 章 涵盖 的 细节 有 一 个 大 体 的 把 握 。 我 们 建议 你 坚持 参 
照 代 码 来 阅读 本 章 。 


15.6 ”测试 前 准备 
我 们 在 第 7 章 创 建 了 一 个 用 于 搜索 音乐 的 应 用 。 本 章 开 始 为 这 个 程序 编写 测试 。 


Karma 需 要 一 个 配置 文件 才能 和 运行。 因此 配置 Karma 的 第 一 步 就 是 创建 一 个 karma.confjs 文 件 。 
将 karma.confjs 放 在 项 目的 根 目录 下 ， 如 下 所 示 。 





























code/routes/music/karma.conf.js 


// Karma configuration 
var path = require('path'); 
var cwd - process.cwd(); 


module.exports = function(config) { 
config.set(Í 
// base path that will be used to resolve all patterns (eg. files, exclude) 
basePath: '', 


// frameworks to use 
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter 
frameworks: ['jasmine'], 


// list of files / patterns to load in the browser 
files: [ 

{ pattern: 'test.bundle.js', watched: false } 
], 


// list of files to exclude 
exclude: [ 


], 





// preprocess matching files before serving them to the browser 
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocesN 
Sor 
preprocessors: { 
'test.bundle.js': ['webpack', 'sourcemap'] 
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), 


webpack: { 
devtool: 'inline-source-map', 
resolve: { 
root: [path.resolve(cwd)], 
modulesDirectories: ['node modules', 'app', 'app/ts', 'test', '.'], 
extensions: ['', '.ts', '.js', '.css'], 
alias: { 


module: { 
loaders: [ 
( test: /N.ts$/, loader: 'ts-loader', exclude: [/node modules/]] 
] 
Jy 
stats: { 
colors: true, 
reasons: true 


h 
watch: true, 
debug: true 


)s 


webpackServer: { 
noInfo: true 


), 


// test results reporter to use 


// possible values: 'dots', 'progress' 
// available reporters: https://npmjs.org/browse/keyword/karma-reporter 
reporters: ['spec'], 


// web server port 
port: 9876, 


// enable / disable colors in the output (reporters and logs) 
colors: true, 


// level of logging 

// possible values: config.LOG DISABLE || config.LOG ERROR || config.LOG. WARN 
N || config.LOG. INFO || config.LOG. DEBUG 

logLevel: config.LOG INFO, 


// enable / disable watching file and executing tests whenever any file chan\ 
ges 
autoWatch: true, 
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// start these browsers 

// available browser launchers: https://npmjs.org/browse/keyword/karma-launcN 
her 

browsers: ['Chrome'], 


// Continuous Integration mode 
// if true, Karma captures browsers, runs the tests and exits 
singleRun: false 


] ) 
} 


先 别 急于 和 弄 清 这 个 文件 的 内 容 ， 而 是 记 住 以 下 几 点 : 

O 将 PhantomJS 设 置 成 日 标 测试 浏览 右 ; 

口 使 用 Jasmine karma 框 架 进行 测试 ; 

口 使 用 一 个 名 为 test.bundle.js 的 webpack bundle 文 件 包 庄 所 有 的 测试 和 程序 代码 。 


下 一 步 ， 新 建 一 个 名 为 test 的 文件 夹 ， 用 于 存放 测试 文件 : 


mkdir test 








15.7 ”测试 服务 类 和 HTTP 

服务 类 在 Angular 程 序 中 常 以 普通 类 的 形式 出 现 。 在 某 种 意义 上 说 ， 这 简化 了 测试 ， 因 为 有 
时 可 以 在 不 需要 Angular 的 情况 下 直接 进行 测试 。 

配置 好 Karma ， 就 可 以 开始 测试 SpotifyService 类 了 。 如 果 记 得 没 错 ， 这 个 服务 类 通过 与 
Spotify API 交 互 读 取 专 辑 、 曲 目 和 艺术 家 相关 信息 。 


切换 到 test 文 件 来， 新建 一 个 service 子 文件 夹 ， 用 于 存放 即将 开始 的 服务 类 测试 。 一 切 准 备 
就 绪 ， 开 始 创建 第 一 个 服务 类 测试 文件 ， 名 为 SpotifyService.spec.ts。 


下 面 开始 组 织 这 个 测试 文件 。 首 先 需 要 从 @angular/core/testing 包 中 导入 几 个 辅助 类 。 


















































code/routes/music/test/services/SpotifyService.spec.ts 


import { 

inject, 

fakeAsync, 

tick, 

TestBed 

from 'Gangular/core/testing'; 


接 下 来 ， 还 需要 导入 其 他 几 个 类 。 


code/routes/music/test/services/SpotifyService.spec.ts 


kg 





import {MockBackend} from '@angular/http/testing'; 
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import { 
Http, 
ConnectionBackend, 
BaseRequestOptions, 
Response, 
ResponseOptions 

) from 'Gangular/http'; 


既然 我 们 的 服务 用 到 了 HTTP 请 求 , 就 需要 从 eangular/http/testing 包 中 导 和 人 MockBackend。 
有 了 这 个 类 ， 就 可 以 设置 预期 值 和 验证 HTTP 请 求 结果 了 。 


最 后 ， 导 入 我 们 要 测试 目标 类 。 














code/routes/music/test/services/SpotifyService.spec.ts 
import (SpotifyService] from '../../app/ts/services/SpotifyService'; 


15.7.1 HTTP 要 点 




















马上 要 编写 测试 了 , 但 是 在 每 个 测试 的 运行 过 程 中 都 要 访问 Spotify 服 务 器 。 这 显然 有 些 不 妥 ， 
原因 如 下 。 


(1) HTTP 请 求 相对 比较 慢 ,， 而 且 随 着 测试 套件 的 体积 越 来 越 大 ， 可 以 预见 运行 全 部 测试 需要 
的 时 间 也 会 越 来 越 长 。 
(2) Spotify 的 API 调 用 设置 了 阔 值 限制 , 如 果 不 停 地 运行 测试 ,会 很 快 耗 尽 所 有 的 API 调 用 资源 。 


(3) 如 果 处 于 离线 状态 、Spotify 崩 演 或 无 法 访问 ， 那 么 测试 也 会 失败 ， 即 使 代码 在 技术 角度 
上 没有 问题 也 是 一 样 。 


这 在 写 单元 测试 时 给 了 我 们 一 个 提示 : 在 运行 测试 前 ， 必 须 隔离 那些 无 法 掌控 的 东西 。 


在 我 们 例子 中 ， 对 应 的 就 是 Spotify 服 务 。 解 决 方法 是 ， 用 一 个 替身 替换 掉 HTTP 请 求 ， 而 且 
这 个 替身 不 需要 访问 真实 的 Spotify 服 务 器 。 


在 测试 领域 ， 这 个 过 程 被 称 为 模拟 依赖 ， 也 时 也 叫 作 擅 装 依赖 。 















































Q 阅读 文章 “模拟 不 是 伪装 ”http:/martinfowler.comyarticles/mocksArentStubs.html ) 
可 以 了 解 更 多 有 关 模 拟 和 伪装 之 间 的 差异 。 
假设 我 们 正在 写 的 测试 依赖 于 某 个 Car 类 。 


它 有 几 个 方法 : 你 可 以 调用 start 来 启动 一 个 car 实例 , 也 可 以 调用 汽车 的 其 他 方法 , 如 stop 
(IFE), park ( 泊 车 ) 和 getSpeed ( 读 取 车 速 )。 


下 面 介 绍 如 何 使 用 伪装 和 模拟 来 写 依赖 于 这 个 类 的 测试 。 
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15.7.2 伪装 


伪装 是 即时 创建 的 对 象 ， 它 包含 所 依赖 对 象 所 有 行为 的 一 个 子 集 。 
下 面 写 一 个 测试 与 start 方 法 交互 。 
为 Car 即 时 创建 一 个 伪装 并 将 它 注入 到 要 测试 的 类 中 : 


describe('Speedtrap', function() { 
it('tickets a car at more than 60mph', function() { 
var stubCar = { getSpeed: function() { return 61; } ); 
var speedTrap - new SpeedTrap(stubCar); 
speedTrap.ticketCount - 0; 
SpeedTrap.checkSpeed( ) ; 
expect(speedTrap.ticketCount).toEqual(1); 
ID 
; 


这 是 使 用 伪装 的 一 个 典型 场景 。 我 们 可 能 仅仅 在 某 个 测试 内 部 使 用 它 。 


























15.7.3 ”模拟 

在 我 们 的 例子 中 ,模拟 是 对 象 更 完整 的 体现 , 它 会 重 写 依赖 的 部 分 或 全 部 行为 。 在 大 部 分 情 
况 下 ， 模 拟 可 以 在 一 个 测试 套件 的 多 个 测试 间 反 复 使 用 。 

它们 有 时 用 于 断言 方法 是 否 按 预 期 的 方式 调用 。 

一 个 模拟 版 本 的 car 类 可 能 是 这 样 的 : 


class MockCar { 
startCallCount: number = 0; 























start() ( 
this.startCallCounte-; 
j 
j 


它 可 以 用 在 另外 一 个 测试 中 ， 如 : 


describe('CarRemote', function() { 
it('starts the car when the start key is held', function() { 
var car - new MockCar(); 
var remote - new CarRemote(); 
remote.holdButton('start'); 
expect(car.startCallCount).toEqual(1); 
P; 
D); 


模拟 和 伪装 的 最 大 区 别 在 于 : 
口 伪装 提供 手动 重 写 行为 功能 的 一 个 子 集 ; 
口 模拟 通常 预 设 期 望 值 ， 验 证 调用 某 些 方法 的 返回 结果 。 








TE 
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15.7.4 Http MockBackend 

既然 现在 心里 有 底 了 ， 就 继续 编写 之 前 的 服务 类 测试 代码 。 

每 次 运行 测试 时 都 与 在 线 的 Spotify 服 务 进行 交互 显然 不 是 个 好 主意 。 幸 运 的 是 Angular 提 供 
了 一 种 方法 ， 使 用 MockBackend 来 伪装 HTTP 调 用 。 

可 以 将 这 个 类 注入 到 一 个 Http 实 例 中 ， 这 样 我 们 就 能 按照 自己 的 意图 对 HTTP 交 互 行为 进行 
操控 了 。 可 以 使 用 不 同 的 方法 进行 干预 和 断言 : 手动 设置 响应 ,模拟 HTTP 错 误 ， 添 加 更 多 预期 
( 比如 判断 请 求 的 URL 是 否 与 预期 值 匹配 ， 请 求 参数 是 否 正确 ， 等 等 )。 

因此 这 里 的 想法 就 是 使 用 一 个 伪 HTTP 库 。 这 个 伪 HTTP 看 起 来 和 真实 的 HTTP 库 一 样 : 所 有 
方法 一 一 匹配 ， 可 以 返回 响应 结果 ， 等 等 。 然 而 ， 我 们 却 不 会 真正 发 出 一 条 请 求 。 

有 实 上 ， 除 了 伪造 请 求 外 ，MockBackend 还 允许 我 们 设置 期 望 结果 ， 监 控 我 们 的 预期 行为 。 
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15.7.5 TestBed.configureTestingModule 和 提供 者 


当 测 试 Angular 程 序 时 ， 需 要 确保 配置 顶级 NgModule ， 后 面 会 在 这 个 测试 中 用 到 它 。 在 进行 
配置 时 ， 我 们 要 配置 提供 者 、 声 明 组 件 并 导入 其 他 模块 : 就 像 你 平常 使 用 NgModule 一 样 〈 参 见 
8.1075 )。 

测试 Angular 代 码 时 ， 我 们 有 时 采取 手动 设置 注入 的 方式 。 这 样 做 的 好 处 是 能 够 对 测试 进行 
更 多 的 操控 。 

所 以 在 测试 Http 请 求 时 , 我 们 不 会 注入 一 个 “真实 ”的 Http 类 ,取而代之 的 是 注入 一 个 看 起 
来 像 Http 的 替身 ， 但 它 可 以 真实 地 拦截 请 求 ， 返 回 我 们 事先 配置 的 响应 。 

为 了 做 到 这 一 点 ， 要 创建 一 个 Http 变 体 ， 其 内 部 使 用 MockBackend。 

方法 是 ， TEbeforeEach 44 T- fii HiTestBed . configureTestingModule. 这 个 钩子 接收 一 个 
回调 函数 ， 它 会 在 每 个 测试 运行 之 前 被 调用 。 这 为 替换 类 的 具体 实现 提供 了 一 个 难得 的 机 会 。 















































code/routes/music/test/services/SpotifyService.spec.ts 


describe('SpotifyService', () => { 
beforeEach(() => { 
TestBed.configureTestingModule({ 
providers: [ 

BaseRequestOptions, 

MockBackend, 

SpotifyService, 

{ provide: Http, 

useFactory: (backend: ConnectionBackend, 
defaultOptions: BaseRequestOptions) => { 
return new Http(backend, defaultOptions); 

}, deps: [MockBackend, BaseRequestOptions] ], 
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] 
}); 
DP 


注意 TestBed.configureTestingModule 的 providers 参 数 可 以 接收 提供 者 数组 ， 用 于 测试 
IEA Fo 


BaseRequestOptions 和 SpotifyService 是 那些 类 的 默认 实现 。 最 后 一 个 提供 者 有 点 复杂 。 








code/routes/music/test/services/SpotifyService.spec.ts 


( provide: Http, 
useFactory: (backend: ConnectionBackend, 
defaultOptions: BaseRequestOptions) -» { 
return new Http(backend, defaultOptions); 
}, deps: [MockBackend, BaseRequestOptions] }, 
] 


这 段 代 码 使 用 了 provide 和 useFactory 人 参数 来 创建 一 个 Http 类 变 体 ,使 用 了 工厂 模式 (也 就 
是 useFactory 的 职责 所 在 )。 


这 个 工厂 的 方法 签名 需要 接收 一 个 ConnectionBackend 实 例 和 一 个 BaseRequestOption 实 
例 。 这 个 对 象 的 第 二 个 参数 是 deps: [MockBackend, BaseRequestOptions] o 这 表示 MockBackend 
是 工厂 的 第 一 个 参数 ，BaseRequestOptions ( 默认 实现 ) 为 第 二 个 参数 。 


最 后 ， 返 回 一 个 MockBackend 作 为 函数 结果 的 定制 Http 类 。 

这 样 做 有 什么 好 处 呢 ? 在 测试 代码 中 每 次 需要 注入 Http 的 地 方 ， 得 到 的 都 是 我 们 改装 过 的 
Http 实 例 。 

我 们 会 在 大 量 测试 中 使 用 这 个 行 之 有 效 的 方法 : 用 依赖 注入 的 方法 定制 依赖 ， 隔 离 需要 测试 
的 功能 。 





























15.7.6 ”测试 getTrack 方法 
下 面 针 对 这 个 服务 类 写 一 个 测试 ， 验 证 我 们 正在 调用 正确 的 URL。 





Qs 如 果 你 还 没 看 过 第 7 章 的 音乐 程序 ， 可 以 在 7.10.5 节 找到 源 代码 。 


现在 开始 测试 getTrack 方 法 。 


code/routes/music/app/ts/services/SpotifyService.ts 


getTrack(id: string): Observable«any[]» { 
return this.query(^/tracks/$([id)^); 
j 
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你 可 得 这 个 方法 的 细节 ， 它 调用 了 query 方 法 ， 从 而 分 析 接 收 的 参数 并 拼接 成 URL。 


code/routes/music/app/ts/services/SpotifyService.ts 


query(URL: string, params?: Array«string»): Observable«any[]» f 
let queryURL: string = ^$(SpotifyService.BASE URLJ$(URL)'; 
if (params) ( 
queryURL = ^$í(queryURL])?$(params.join('&'))'; 
j 


return this.http.request(queryURL).map((res: any) -» res.json()); 
j 


请 求 /tracks/${fid} 意 味 着 假设 当 调 用 getTrack('TRACK_ID' ) 方 法 时 ， 期 望 返 回 的 URL 是 
https://api.spotify.com/vl/tracks/'TRACK ID, 


可 以 这 样 写 这 个 测试 : 


describe('getTrack', () => { 
it('retrieves using the track ID', 
inject([SpotifyService, MockBackend], fakeAsync((spotifyService, mockBackend) => { 
var res; 
mockBackend.connections.subscribe(c -» { 
expect(c.request.url).toBe('https://api.spotify.com/v1/tracks/TRACK ID'); 
let response = new ResponseOptions((body: '["name": "felipe"}'}); 
c.mockRespond(new Response(response)); 
}); 
spotifyService.getTrack('TRACK_ID').subscribe((_res) => { 
res = _res; 
De 
tick(); 
expect(res.name).toBe('felipe'); 
) 
)? 
D); 


初 看 有 点 难以 理解 ， 下 面 一 一 讲解 。 
当 测 试 有 依赖 时 ， 使 用 Angular 注 入 器 提供 那些 类 的 实例 。 如 下 所 示 : 


inject([Class1，...，ClassN]，(instance1，...，instanceN) => { 
. testing code ... 








和 类 

当 测 试 返回 的 是 一 个 承诺 或 者 RxJS 的 可 观察 对 象 时 ,可 以 使 用 fakeAsync 辅 助 工具 来 测试 那 
些 代码 ( 像 测试 同步 代码 那样 )。 在 调用 tick() 后 ， 承 诺 立 即 生 效 ， 可 观察 对 象 也 会 马上 接收 到 
通知 。 

如 下 列 代码 所 示 : 


inject( [SpotifyService, MockBackend], fakeAsync((spotifyService, mockBackend) => { 



































pu 
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首先 要 读 取 两 个 变量 : spotifyService 和 mockBackend。 前 者 是 一 个 特定 的 SpotifyService 
实例 ， 后 者 是 一 个 MockBackend 实 例 。 注 意 内 部 函数 ( spotifyService, mockBackend ) 的 参数 是 
注入 的 ， 相应 的 类 型 在 inject 函数 第 一 个 参数 的 数组 中 (SpotifyService 和 MockBackend ) 指定 。 

其 次 运行 位 于 fakeAsync 内 部 的 代码 。 这 就 意味 着 当 调 用 tick( ) 时 ,异步 代码 会 以 同步 方式 
运行 。 

测试 的 运行 环境 已 经 准备 就 绪 ， 现 在 可 以 写 “真正 ”的 测试 代码 了 。 首 先 声明 一 个 res 变 量 ， 
存放 HTTP 调 用 响应 结果 。 然 后 ， 订 阅 mockBackend.connections 事 件 : 


var res; 
mockBackend.connections.subscribe(c => ( ... }); 


简单 地 说 ， 每 当 mockBackend 上 产生 一 个 新 的 连接 ， 我 们 都 希望 收 到 通知 ( 例如， 调用 了 这 
个 函数 )。 

为 了 验证 SpotifyService 根 据 指 定 的 TRACK_ID 调 用 了 正确 的 URL， 可 以 指定 预期 结果 为 我 
们 预 设 的 URL。 首 先 通 过 c .request .ur1 得 到 URL 值 ， 然 后 设置 期 望 结果 : c.request.ur1 的 值 
应 该 是 字符 串 'https://api.spoti fy.com/v1/tracks/TRACK, ID': 



























































expect(c.request.url).toBe( https://api.spotify.com/v1/tracks/TRACK ID'); 
运行 测试 。 如 果 请 求 URL 不 匹配 ， 则 测试 失败 。 


现在 我 们 已 经 收 到 了 请 求 ,并 证 明了 它 是 正确 的 。 现 在 需要 打造 一 个 响应 。 为 此 ， 新建 一 个 
Response0ptions 实 例 ， 指 定 JSON 字 符 串 {"name": "felipe"} 为 响应 内 容 。 








let response = new ResponseOptions(([body: '{"name": "felipe"]')); 


最 后 , 将 连接 的 响应 替换 成 一 个 Response 对 象 , 它 包 里 了 刚刚 创建 的 ResponseOptions 实 例 。 


c.mockRespond(new Response(response)); 


Qs 注意 ，subscribe 中 的 回调 函数 可 以 复杂 到 任何 你 想 要 的 程度 ， 可 以 包含 基于 
URL 的 条 件 逻 辑 、 查 询 参 数 或 者 任何 可 以 从 请 求 对 象 中 读 取 的 信息 。 
这 样 一 来 ， 我 们 就 可 以 为 可 能 遇 到 的 每 个 场景 编写 测试 了 。 








现在 已 经 准备 好 了 使 用 TRACK_ID 人 参数 来 调用 getTrack 方 法 , 并 且 可 以 通过 res 变 量 跟踪 响应 
结果 : 


spotifyService.getTrack('TRACK ID').subscribe(( res) => ( 
res - res; 


5; 


如 果 此 时 中 断 测试 ， 在 触发 回调 函数 前 会 一 直 等 等 HTTP 请 求 发 送 和 响应 结果 返回 。 也 有 可 
能 产生 其 他 执行 路 径 ， 我 们 不 得 不 重新 组 织 代 码 对 任务 进行 同步 。 幸 好 fakeAsync 可 以 解决 这 个 
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可 题 。 方 法 是 调用 tick()， 蜡 步 代码 会 立即 执行 ， 就 像 变 魔术 一 样 : 


* 


tick(); 


执行 最 后 一 步 检验 ， 确 保 设 置 的 响应 结果 和 接收 到 的 相同 : 


expect(res.name).toBe('felipe'); 


细 想 一 下 , 这 个 服务 类 的 所 有 方法 的 代码 都 非常 类 似 。 将 设置 URL 预 期 值 的 代码 片断 抽取 出 
放 到 一 个 名 为 expectedURL 的 函数 中 。 


code/routes/music/test/services/SpotifyService.spec.ts 








function expectURL(backend: MockBackend, url: string) { 
backend.connections.subscribe(c -» ( 
expect(c.request.url).toBe(url); 
let response = new ResponseOptions(([body: '{"name": "felipe"}'}); 
c.mockRespond(new Response(response)); 
D; 
j 


Jk IAE, "TEETH ggetArtistfllgetAlbum7r i2; ii 55 TA 


code/routes/music/test/services/SpotifyService.spec.ts 


describe('getArtist', ()  ( 
it('retrieves using the artist ID', 
inject([SpotifyService, MockBackend], fakeAsync((svc, backend) => { 
var res; 
expectURL(backend, 'https://api.spotify.com/vi/artists/ARTIST ID'); 
svc.getArtist('ARTIST ID').subscribe(( res) => ( 
res - res; 
p 
tick(); 
expect(res.name).toBe('felipe'); 


D) 

















D; 
); 


describe('getAlbum', () => { 
it('retrieves using the album ID', 
inject([SpotifyService, MockBackend], fakeAsync((svc, backend) => { 
var res; 
expectURL(backend, 'https://api.spotify.com/v1/albums/ALBUM ID'); 
svc.getAlbum('ALBUM ID').subscribe(( res) => { 
res - res; 
}); 
tick(); 
expect(res.name).toBe('felipe'); 
})) 
y; 
D; 


searchTrack 方 法 稍 有 不 同 : 它 不 直接 调用 query ， 而 是 使 用 search 方 法 替代 。 
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code/routes/music/app/ts/services/SpotifyService.ts 


searchTrack(query: string): Observable«any[]» { 
return this.search(query, 'track'); 


} 


search 接 着 调用 query ， 将 /search 作 为 第 一 个 参数 并 将 一 个 包含 q=<query> 和 type=track 
的 数组 作为 第 二 个 参数 。 


code/routes/music/app/ts/services/SpotifyService.ts 





search(query: string, type: string): Observable«any[]» ( 
return this.query(^/search', | 
`q=${query}`, 
`type=${type}` 
1); 
j 


最 后 ，query 将 参数 转换 成 带 有 QueryString 的 URL 路 径 。 我 们 期 待 调用 的 URL 是 以 
/search?q=&type=track 结 尾 的 。 


综合 所 学 知识 ， 为 searchTrack 方 法 编写 测试 。 








code/routes/music/test/services/SpotifyService.spec.ts 


describe('searchTrack', () => { 
it('searches type and term', 
inject([SpotifyService, MockBackend], fakeAsync((svc, backend) => { 
var res; 
expectURL(backend, 'https://api.spotify.com/v1/search?q-TERM&type-track'N 


Svc.searchTrack("TERM").subscribe(( res) => ( 


res = res; 
; 

tick(); 
expect(res.name).toBe('felipe'); 


})) 
i 
P 


这 个 测试 与 之 前 写 过 的 测试 异曲同工 。 下 面 一 起 回顾 这 个 测试 的 内 容 : 


O 植 人 HTTP 生 命 周 期 ， 在 HTTP 连 接 初 始 化 时 添加 回调 ; 

口 为 当前 连接 设置 预期 URL， 包 含 查询 类 型 和 搜索 关键 字 ; 
口 调用 测试 方法 searchTrack; 

a ee ud 的 异步 调用 ; 
口 断言 预期 响应 结果 。 
简 而 言 之 ， 测 试 服务 类 时 要 做 的 是 : 


(1) 使 用 伪装 或 模拟 来 隔离 全 部 依赖 
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D 在 异步 调用 的 情况 下 ， 使 用 fakeAsync 和 tick 确 保 它们 的 完成 ; 
(3) 调用 要 测试 的 服务 类 ; 

(4) 断言 方法 返回 值 与 预期 值 匹配 。 
下 面 把 注意 力 转向 那些 消费 服务 的 类 : 组 件 。 




















15.8 测试 组 件 间 的 路 由 
测试 组 件 时 ， 可 以 使 用 下 列 两 种 策略 之 一 : 
(1) 编写 测试 从 外 部 与 组 件 进行 交互 ， 传 递 属性 值 ， 检 验 标签 生成 结 
(2) 测试 各 个 组 件 方法 及 其 输出 结 
这 两 种 测试 策略 分 别称 为 黑金 测试 和 白金 测试 。 本 节 将 演示 如 何 混合 使 用 它们 。 


首先 为 相对 简单 的 一 个 组 件 Artistcomponent 类 编写 测试 。 第 一 部 分 测试 将 测试 组 件 的 内 部 
结构 ， 所 以 它 属 于 白 盒 测试 。 


在 开始 之 前 ， 先 回 顾 一 下 ArtistComponent 的 内 容 : 
在 类 的 构造 函数 上 ， 首 先 从 routeParams 集 合 中 读 取 id。 


code/routes/music/app/ts/components/ArtistComponent.ts 












































constructor(private route: ActivatedRoute, private spotify: SpotifyService, 
private location: Location) { 
route.params.subscribe(params => { this.id = params['id']; )); 


} 
很 快 ,我 们 遇 到 了 第 一 个 绊脚石 :在 没有 运行 状态 路 由 需 的 情况 下 ,如 何 获取 当前 路 由 的 ID? 











15.8.1 ”为 测试 创建 路 由 器 


在 Angular 中 写 测 试 时 ， 我 们 手动 配置 了 大 量 注 入 的 类 。 路 由 ( 和 测试 组 件 ) 也 包含 大 量 需 
要 注入 的 依赖 。 尽 管 如 此 ， 一 旦 配置 好 了 ， 它 就 很 少 变更 而 且 简 单 易 用 。 

写 测试 时 ,使 用 beforeEach 和 TestBed.configureTestingModule 设 置 可 注入 的 依赖 是 很 方 
便 的 。 在 测试 ArtistComponent 的 时 候 ， 将 定义 一 个 函数 来 创建 和 配置 这 个 测试 的 路 由 。 









































code/routes/music/test/components/ArtistComponent.spec.ts 


describe('ArtistComponent', () => ( 
beforeEach(() => { 
configureMusicTests(); 


5; 
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在 辅助 类 文件 MusicTestHelpers.ts 中 定义 方法 configureMusicTests 。 一 起 来 看 看 。 








这 仅仅 是 configureMusicTests 的 实现 代码 。 不 用 担心 ， 下 面 将 逐一 解释 。 


code/routes/music/test/MusicTestHelpers.ts 





export function configureMusicTests() { 
const mockSpotifyService: MockSpotifyService = new MockSpoti fyService(); 


TestBed.configureTestingModule(Í 
imports: [ 
( // TODO RouterTestingModule.withRoutes coming soon 
ngModule: RouterTestingModule, 
providers: [provideRoutes(routerConfig)] 
TestModule 
], 
providers: [ 
mockSpoti fyService.getProviders(), 


provide: ActivatedRoute, 
useFactory: (r: Router) -» r.routerState.root, deps: [ Router ] 





I 
} 


首先 创建 一 个 MockSpoti fyService 实 例 ， 用 来 模拟 真实 的 Spoti fyService 实 现 。 

接 下 来 ， 使 用 一 个 名 为 TestBed 的 类 ， 并 调用 其 方法 configureTestingModule。TestBed 是 
Angular 内 置 的 一 个 辅助 类 库 ， 帮 助 我 们 简化 测试 。 

本 例 中 ，TestBed.configureTestingModule 的 作用 是 为 测试 配置 NgModule。 你 可 以 看 到 我 
们 提供 了 一 个 NgModule 配 置 作为 参数 ， 它 包含 : 














口 imports 





口 providers 

在 imports 中 ， 导 入 : 

口 RouterTestingModule, ， 并 用 routerConfig 进 行 配置 一 一 这 样 能 够 为 测试 配置 路 由 器 ; 

口 TestModule ， 这 个 NgModule 声 明了 所 有 将 要 测试 的 组 件 ( 具体 细节 参见 MusicTest- 
Helpers.ts )。 

在 providers 中 , 提供 了 


口 MockSpotifyService (通过 mockSpotifyService.getProviders()) 
口 ActivatedRoute 


我 们 以 Router 为 人 口 ， 进 一 步 学 习 。 
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1. Router 
至 今 尚未 提 及 的 是 测试 时 要 用 到 哪些 路 由 。 对 此 有 


code/routes/music/test/MusicTestHelpers.ts 























GComponent( f 
selector: 'blank-cmp', 
template: ^^ 

}) 

export class BlankCmp { 


} 


@Component( { 
selector: 'root-cmp', 
template: `<router-outlet></router-outlet>` 


}) 


export class RootCmp { 


} 


export const routerConfig: Routes = [ 
{ path: '', component: BlankCmp } 
path: 'search', component: SearchComponent } 


{ 
{ 
{ 
{ 
I$ 
这 里 并 不 ( 像 真实 路 由 器 配置 的 那样 ) 跳 转 到 一 





多 种 方法 实现 ,首先 看 一 下 我 们 要 用 的 方式 。 


/ 


path: 'artists/:id', component: ArtistComponent }, 
path: 'tracks/:id', component: TrackComponent }, 
path: 'albums/:id', component: AlbumComponent } 








个 空 的 URL， 而 是 使 用 一 个 BlankCmp 蔡 代 。 





当然 ， 如 果 你 坚持 像 顶层 应 用 那样 使 用 RouterConfig ， 那 么 要 先 在 其 他 地 方 使 用 export 导 


出 ， 并 在 此 处 使 用 import 导 入 。 























如 果 遇 到 更 复杂 的 场景 ， 必 须 针 对 多 种 不 同 的 路 由 配置 进行 测试 ， 那 么 可 以 在 musicTest- 
Providers 冰 数 中 接收 一 个 参数 ， 从 而 每 次 运行 测试 都 使 用 一 个 新 的 路 由 器 配置 。 


面临 太 多 的 选择 , 你 必须 挑选 一 种 最 适合 自己 团队 的 方式 。 在 路 由 是 相对 静态 的 并 且 一 个 配 











置 可 以 服务 于 所 有 测试 的 情况 下 ， 这 个 配置 相当 棒 。 























现在 所 有 依赖 都 已 经 解决 , 可 以 通过 new Router 创 建 一 个 新 的 路 由 器 , 并 调用 其 r .initial- 


Navigation() 方 法 。 


2. ActivatedRoute 











ActivatedRoute 服 务 跟踪 “当前 路 由 ”。 它 需要 
行 注 入 o 


3. MockSpotifyService 














巴 Router 作 为 依赖 ， 并 把 它 加 入 到 deps 来 进 


之 前 通过 模拟 HTTP 库 测试 了 SpotifyService。 这 里 我 们 将 会 模拟 整个 服务 类 。 一 起 来 看 看 

















如 何 模拟 这 个 类 ， 或 者 说 任何 服务 。 
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15.8.2 ”模拟 依赖 
在 music/test 目 录 下 ， 找 到 mocks/spotify.ts 文 件 ， 内 容 如 下 。 


code/routes/music/test/mocks/spotify.ts 


import {SpyObject} from './helper'; 
import {SpotifyService} from '../../app/ts/services/SpotifyService'; 


export class MockSpotifyService extends SpyObject { 
getAlbumSpy; 
getArtistSpy; 
getTrackSpy; 
searchTrackSpy; 
mockObservable; 
fakeResponse; 


iX Hi p BHMockSpoti fyServiceH 4$ 25, 它 是 真实 Spoti fyService 的 一 个 模拟 版 本 。 这 些 实 
例 变量 会 被 作为 探 子 〈spy ) 使 用 。 





15.83 ff 
探 子 是 一 种 比较 特别 的 模拟 对 象 ， 有 两 个 好 处 : 
(1) 可 以 模拟 返回 值 ; 
(2) 可 以 计算 方法 调用 次 数 和 调用 的 参数 值 。 
要 在 Angular 测 试 中 使 用 探 子 , 可 以 使 用 一 个 内 部 类 Spyobject 实 现 (用 于 Angular 内 部 测试 )。 
正如 我 们 的 代码 所 示 ， 你 可 以 即时 创建 一 个 新 Spyobject 或 者 让 模拟 类 继承 SpyObject 。 


继承 或 直接 使 用 这 个 类 的 好 处 在 于 , 它 提供 一 个 spy 方 法 。spy 方 法 允许 你 覆盖 某 个 方法 并 强 
制 返回 值 (以 及 监控 ， 确保 方法 被 调用 )。 下 面 的 代码 对 类 构造 函数 使 用 spy。 


code/routes/music/test/mocks/spotify.ts 


























constructor() { 
super(SpotifyService); 


this.fakeResponse - null; 

this.getAlbumSpy - this.spy('getAlbum').andReturn(this); 
this.getArtistSpy - this.spy('getArtist').andReturn(this); 
this.getTrackSpy - this.spy('getTrack').andReturn(this); 


this.searchTrackSpy - this.spy('searchTrack').andReturn(this); 
j 


构造 函数 的 第 一 行 调用 了 Spy0bject 构 造 函 数 ,传递 要 模拟 的 特定 类 。 调 用 super(... ) 是 可 
选 的 ,但 模拟 时 类 会 继承 所 有 特定 类 的 方法 ， 因 此 你 只 需要 覆盖 要 测试 的 方法 。 
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O 如 果 你 想 知 道 SpyObject 是 如 何 实现 的 ， 请 查看 angular/angular 项 目下 的 文件 
/modules/angular2/src/testing/testing internal.ts ( https://github.com/angular/angular/ 
blob/bO0cebd-ba6b651e9e7eb5bf801ea42dc7c4a7f25/modules/angular2/src/testing/ 
testing internal.ts #L205 ). 

调用 super 之 后 ， 将 fakeResponse 的 值 初 始 化 为 null1 ， 我 们 稍 后 会 用 到 它 。 

接 下 来 用 探 子 蔡 换 特 定 类 的 方法 。 编 写 测试 时 使 用 一 个 引用 更 容易 设置 预期 值 和 模拟 响应 结果 。 

在 ArtistComponent 中 使 用 SpotifyService 时 ， 真 实 的 getArtist 方 法 返回 一 个 可 观察 对 

象 。 在 组 件 中 调用 的 方法 是 subscribe 方 法 。 


code/routes/music/app/ts/components/ArtistComponent.ts 












































ngOnInit(): void { 
this.spotify 
.getArtist(this.id) 
.subscribe((res: any) => this.renderArtist(res)); 


j 
然而 在 模拟 类 中 , 我 们 会 采取 一 个 小 技巧 : getArtist 并 不 返回 可 观察 对 象 , 而 是 返回 this ， 
也 就 是 MockSpotifyService 上 自身 。 这 就 意味 着 上 面 tnis.spotify.getArtist(this.id) 的 返回 
值 是 MockSpoti fyService,; 
不 过 这 样 有 一 个 问题 : ArtistComponent 将 会 调用 可 观察 对 象 的 subscribe 方 法 。 考 虑 到 这 
一 点 ， 可 以 在 MockSpoti fyService 中 定义 一 个 subscribe 方 法 。 














code/routes/music/test/mocks/spotify.ts 


subscribe(callback) { 
callback(this. fakeResponse); 


} 
现在 在 模拟 对 象 上 调用 subscribe 方 法 ,会 立即 调用 这 个 回调 函数 ， 异 步 方法 会 同步 执行 。 
男 外 注意 ， 我 们 使 用 this. fakeResponse 来 调用 这 个 回调 函数 。 它 将 我 们 引 向 男 一 个 方法 。 





code/routes/music/test/mocks/spotify.ts 


setResponse(json: any): void { 
this. fakeResponse = json; 


} 
这 个 方法 并 没有 蔡 换 特定 服务 的 任何 部 件 , 取而代之 的 是 使 用 一 个 辅助 方法 ,允许 测试 代码 
设置 既定 的 响应 结果 ( 可 能 来 源 于 特定 的 服务 )， 并 利用 它 模拟 不 同 的 响应 。 






































code/routes/music/test/mocks/spotify.ts 


getProviders(): Array«any» { 
return [( provide: SpotifyService, useValue: this ]]; 


} 
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最 后 一 个 方法 是 辅助 方法 ， 用 在 TestBed .con figureTestingModule 的 providers 参数 上 。 
它 和 稍 后 回 过 头 来 写 组 件 测试 时 看 到 的 类 似 。 


下 面 是 MockSpotifyService 的 完整 代码 。 





code/routes/music/test/mocks/spotify.ts 


import {SpyObject} from './helper'; 
import {SpotifyService} from '../../app/ts/services/SpotifyService'; 


export class MockSpotifyService extends SpyObject { 
getAlbumSpy; 
getArtistSpy; 
getTrackSpy; 
searchTrackSpy; 
mockObservable; 
fakeResponse; 


constructor() { 
super(SpotifyService); 


this.fakeResponse - null; 

this.getAlbumSpy - this.spy('getAlbum').andReturn(this); 

this.getArtistSpy - this.spy('getArtist').andReturn(this); 

this.getTrackSpy - this.spy('getTrack').andReturn(this); 

this.searchTrackSpy - this.spy('searchTrack').andReturn(this); 
j 


subscribe(callback) { 
callback(this.fakeResponse); 
} 


setResponse(json: any): void { 
this. fakeResponse = json; 


} 


getProviders(): Array«any» { 
return [( provide: SpotifyService, useValue: this ]]; 
j 
j 


15.9 回 到 测试 代码 


万 事 俱 备 ， 只 欠 东 风 。 现 在 可 以 为 ArtistComponent 编 写 测 试 代码 了 。 
首先 是 导入 语句 。 























code/routes/music/test/components/ArtistComponent.spec.ts 


import { 
inject, 
fakeAsync, 
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} from 'Gangular/core/testing'; 
import ( Router } from 'Gangular/router'; 
import { Location } from 'Gangular/common'; 
import { MockSpotifyService } from '../mocks/spotify'; 
import { SpotifyService } from '../../app/ts/services/SpotifyService'; 
import { 
advance, 
createRoot, 
RootCmp, 
configureMusicTests 
) from '../MusicTestHelpers'; 


接 下 来 使 用 confi gureMusicTests 描述 测试 ， 确 保 所 有 测试 用 例 都 可 以 访问 musicTestProviders。 








code/routes/music/test/components/ArtistComponent.spec.ts 


describe('ArtistComponent', () => { 
beforeEach(() => { 
configureMusicTests(); 


5; 
然后 写 一 个 测试 来 验证 组 件 初 始 化 的 细节 。 首先 , 回顾 一 下 ArtistComponent 的 初始 化 过 程 。 








code/routes/music/app/ts/components/ArtistComponent.ts 


export class ArtistComponent implements OnInit { 
id: string; 
artist: Object; 


constructor(private route: ActivatedRoute, private spotify: SpotifyService, 
private location: Location) { 
route.params.subscribe(params => { this.id = params['id']; )); 


} 


ngOnInit(): void { 
this.spotify 
.getArtist(this.id) 
.subscribe((res: any) => this.renderArtist(res)); 


j 
请 记 住 , 创建 组 件 时 , 使 用 route.params 接 收 当时 路 由 的 id 参数 , 并 将 它 存储 在 类 的 id 属性 中 。 
当 组 件 初始 化 时 , ngonInit 方 法 被 Angular 触 发 ( 因为 此 组 件 实现 了 onInit 接 口 )。 然 后 针对 
接收 到 的 id 使 用 SpotifyService 读 取 相 应 的 艺术 家 。 当 获取 艺术 家 数据 后 , 调用 renderArtist， 
传递 艺术 家 数据 。 
这 里 一 个 重要 的 理念 就 是 使 用 依赖 注入 来 获取 SpotifyService ， 但 是 要 记得 ， 我 们 之 前 已 
经 创建 了 一 个 MockSpotifyService。 
为 了 测试 这 一 行为 ， 执 行 以 下 步骤 ; 
(1) 使 用 路 由 导向 到 ArtistComponent ， 组 件 会 进行 初始 化 ; 
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(2) 验证 MockSpotifyService 在 ArtistComponent 中 已 经 被 注入 , 根据 相应 的 id 读 取 艺 术 家 数据 。 
下 面 是 完整 的 测试 代码 。 


code/routes/music/test/components/ArtistComponent.spec.ts 





describe('initialization', () => ( 
it('retrieves the artist', fakeAsync( 
inject([Router, SpotifyService], 
(router: Router, 
mockSpotifyService: MockSpotifyService) -» ( 
const fixture - createRoot(router, RootCmp); 


router.navigateByUrl('/artists/2'); 
advance( fixture); 


expect(mockSpotifyService.getArtistSpy).toHaveBeenCalledWith('2'); 


20»; 
DP 


接 下 来 一 步 步 进行 解释 。 





15.9.1 fakeAsync 和 advance 


首先 用 fakeAsync 包 衷 测 试 。 有 了 fakeAsync ， 我 们 就 能 够 在 状态 检测 和 异步 操作 发 生 时 进 
行 更 多 的 控制 , 并 且 不 需要 深入 其 内 部 细节 。 这 样 做 的 结果 是 ,我 们 在 测试 中 做 了 变更 ,必须 显 
式 地 通知 组 件 检测 变更 结果 。 

一 般 来 说 ， 开 发 程序 时 不 必 担 心 这 个 问题 ， 这 是 Zones 应 该 做 的 事 。 但 在 整个 测试 过 程 中 ， 


我 们 可 以 更 细致 地 对 状态 变化 的 检测 进行 操作 。 
向 下 跳 过 几 行 ， 可 以 看 到 调用 了 MusicTestHelpers 中 的 advance 函 数 。 一 起 看 看 这 个 函数 。 












































code/routes/music/test/MusicTestHelpers.ts 


export function advance(fixture: ComponentFixture«any»): void { 
tick(); 
fixture.detectChanges(); 

j 


advance 国 数 做 了 两 件 事 : 

(1) 通知 组 件 检 测 状态 变更 ; 

(2) 调用 tick()。 

使 用 fakeAsync 时 ， 计 时 器 是 同步 的 。 我 们 使 用 kick( ) 来 模拟 异步 流逝 的 时 间 。 


实际 上 , 在 我 们 的 测试 中 ， 任何 需要 Angular 大 显 身手 的 时 候 都 可 以 调用 advance 因数 。 例 如 ， 
如 果 要 导向 到 新 的 路 由 ， 更 新 一 个 表单 元 素 ， 发 出 一 个 HTTP 请 求 等 ， 我 们 都 可 以 调用 adqvance 
函数 给 Angular 制 造 机 会 大 显 神通 。 
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15.9.2 inject 

在 测试 中 需要 添加 一 些 依赖 。 使 用 inject 可 以 做 到 这 一 点 。inject 接 收 两 个 参数 : 

(0) 一 个 等 竺 注入 的 令 牌 数组 

Q) 一 个 提供 了 注入 的 函数 

inject 会 使 用 哪些 类 ? 提供 者 通过 TestBed.configureTestingModule 的 providers 来 定义 。 
注意 ， 这 里 要 注入 : 


(1) Router 


























T 











(2) Spoti fyService 








要 注入 的 Router 类 就 是 上 面 nusicTestProviders 中 配置 的 Router。 


对 于 SpotifyService ， 注意 请 求 注入 Spoti fyService 时 ， 得 到 的 是 MockSpotifyService。 
看 起 来 有 点 星 深 ,但 是 基于 目前 为 止 的 讨论 你 应 该 可 以 理解 。 

















15.9.3 测试 ArtistComponent 组 件 初始 化 
一 起 回顾 一 下 测试 代码 的 内 容 。 


code/routes/music/test/components/ArtistComponent.spec.ts 


const fixture - createRoot(router, RootCmp); 


router.navigateByUrl('/artists/2'); 
advance( fixture); 


expect(mockSpotifyService.getArtistSpy).toHaveBeenCalledWith( '2'); 
Ri Mii FHereateRoot8!]f£—^PRootCmp3Ef/], — EA icreateRoot iti HJ] PLC, 


code/routes/music/test/MusicTestHelpers.ts 





export function createRoot(router: Router, 
componentType: any): ComponentFixture«any» { 
const f = TestBed.createComponent(componentType); 
advance( f); 
(«any»router).initialNavigation(); 
advance( f); 
return f; 


意 ， 这 时 调用 createRoot 可 以 : 
(1) 创建 一 个 根 组 件 实例 ; 
(2) 对 其 进行 advance 处 理 ; 
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(3) 通知 路 由 器 设置 initialNavigation; 

(4) 再 次 进行 aqvance 处 理 ; 

(5) 返回 全 新 的 根 组 件 。 

测试 依赖 路 由 器 的 组 件 时 需要 不 少 准备 工作 ， 有 这 个 辅助 函数 可 以 方便 不 少 。 


注意 我 们 再 次 使 用 了 TestBed 类 库 来 调用 TestBed .createComponent 方 法 。 这 个 方法 创建 了 
一 个 相应 类 型 的 组 件 。 












































Q、 RootCmp 是 我 们 在 MusicTestHelpers 中 创建 的 一 个 空 组 件 。 其 实 完 全 没 必要 为 
根 组 件 创建 一 个 空 组 件 。 这 里 这 样 做 是 因为 能 够 或 多 或 少 在 隔离 环境 中 测试 子 
组 件 (ArtistComponent )。 这 样 一 来 ， 就 不 必 担 心 对 上 层 应 用 组 件 的 影响 了 。 
但 是 ， 也 许 你 想 要 确保 子 组 件 在 上 下 文 环境 中 正确 运行 。 在 这 种 情况 下 ， 你 可 

能 想 使 用 应 用 程序 常规 的 父 组 件 ， 而 非 RootCmp。 


接 下 来 探讨 使 用 router 转向 URL /artists/2 以 及 advance 。 当 我 们 定位 到 该 URL 时 ， 
ArtistComponent 应 该 会 进行 初始 化 ， 因 此 可 以 断定 调用 SpotifyService 的 getArtist 方 法 时 返 
回 了 正确 的 值 。 





15.9.4 测试 ArtistComponent 方法 


回想 一 下 ，ArtistComponent 中 有 一 个 href 调 用 了 back() 方 法 。 


code/routes/music/app/ts/components/ArtistComponent.ts 
back(): void { 
this.location.back(); 
j 
下 面 来 测试 ， 当 调用 back 方 法 时 ， 路 由 需 会 将 用 户 重 定向 回 之 前 的 位 置 。 


当前 位 置 状态 由 Location 服 务 控制 。 当 需要 将 用 户 返 回 原来 的 位 置 时 ， 我 们 使 用 Location 
的 back 方 法 。 


这 里 演示 如 何 测 试 back 方 法 。 














code/routes/music/test/components/ArtistComponent.spec.ts 
describe('back', () => { 
it('returns to the previous location', fakeAsync( 
inject([Router, Location], 
(router: Router, location: Location) => { 
const fixture - createRoot(router, RootCmp); 
expect(location.path()).toEqual('/'); 


router.navigateByUrl('/artists/2'); 
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advance( fixture); 
expect(location.path()).toEqual('/artists/2'); 


const artist - fixture.debugElement.children[1].componentInstance; 
artist.back(); 
advance( fixture); 
expect(location.path()).toEqual('/'); 
0); 
}); 
初始 结构 与 之 类 似 : 注入 依赖 并 创建 一 个 新 的 组 件 。 
加 入 一 个 新 的 expect 语 句 ， 上 断定 location.path() 与 预期 结果 一 致 。 


这 里 提供 一 种 新 思路 : 当 访 问 ArtistComponent 的 方法 时 ， 通 过 fixture.debugElement . 
children[1] .componentInstance 这 一 行 得 到 ArtistComponent 实 例 的 一 个 引用 。 


有 了 组 件 实例 ， 就 可 以 直接 调用 其 方法 了 ， 如 back()。 
调用 了 back 方 法 后 ， 进 行 adqvance 处 理 ， 然 后 验证 location.path() 是 否 与 预期 一 致 。 





























15.9.5 测试 ArtistComponent DOM 模板 值 
最 后 要 测试 ArtistComponent 的 一 部 分 就 是 生成 艺术 家 模板 。 








code/routes/music/app/ts/components/ArtistComponent.ts 


template: ^ 
«div xngIf-"artist"» 
«hi»(( artist.name ])]«/h1» 


«p» 
«img src="{{ artist.images[0].url }}"> 
«/p» 


<p><a href (click)-"back()"»Back«/a»«/p» 
</div> 

















记 住 j 实例 变量 artist xESpotifyService Z&getArtist 7; iX 的 调用 结果 。 既 然 用 Mock- 
SpotifyService 模 拟 SpotifyService ， 那 么 模板 中 使 用 的 数据 无 论 如 何 都 应 该 是 mock- 
SpotifyService 的 返回 结果 。 下 面 一 起 看 看 如 何 实现 。 


code/routes/music/test/components/ArtistComponent.spec.ts 











describe('renderArtist', () => { 
it('renders album info', fakeAsync( 
inject([Router, SpotifyService], 
(router: Router, 
mockSpotifyService: MockSpotifyService) -» { 
const fixture - createRoot(router, RootCmp); 
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let artist = (name: 'ARTIST NAME', images: [(url: 'IMAGE 1']]); 
mockSpoti fyService.setResponse(artist); 


router.navigateByUrl('/artists/2'); 
advance( fixture); 


const compiled - fixture.debugElement.nativeElement; 


expect(compiled.querySelector( 'h1').innerHTML).toContain('ARTIST NAME'); 
expect(compiled.querySelector('img').src).toContain( IMAGE 1'); 
}))); 
335 


这 里 比较 陌生 的 是 通过 mockSpotifyService 的 setResponse 方 法 手动 设置 返回 结果 。 


artist 变 量 是 一 个 测试 工具 夹 ， 代 表 调 用 artists 终 端 即 使 用 GET 方 法 请 求 https://api. 
spotify.com/v1/artists/{id} 时 从 Spotify API 返 回 的 结果 。 


真实 的 JSON 数 据 看 起 来 如 图 15-1 所 示 。 




















e^o 
Builder [rec LJ p> WE, 
History Collection httpe//apl spotily.cn., Noenvironment v @ 
G tA~ 
GETY https://apispotify.com/vi/artists/00dUWJOsBjDrqHygGUXeCF Params 回 
(b Spotify API 了 
14Janat252pm 。 Orequests e - 
Authorization Headers (0) Pre-request script Tests «m (5. 
Add requests to this collection and 
create folders to organize them No Auth 区 
Body Cookies Headerstis Tests(o/0) Status 2000K Time bbim 
Raw Preview | | Jon. | | 到 na 





Sect "M £ 
spo! "https://open. spotify.con/artist/00dUW20sBjDraHygGUXeCF" 


n 
2 

3 

5 

5- "followers": ( 
6 "href": mil, 

7 "total": 421613 
8 

9- "genres": [ 

1e indie folk" 
ndie pop" 






tps: //api vule Re s/00dUWJ0sB jDraHygGUXeCF " 
UWJ8s8 jDrqHygGUXeCI 
t 





16, 

"url": "https://i.scdn.co/image/eb266625ab075341e8c4378a177a27370£91903" , 

19 "width": 1000 
p 








t": 522 
"https://i.scdn.co/image/2f91c3cace3c5a6a48£3d0e2fd2136484911b332", 
24 "width": 640 

» 


只 





: 163, 

"url": "https://i.scdn.co/image/2efc93d7ee88435116093274980f04ebceb7b527" , 

29 "width": 200 
了 





"hi Ms Ha / [4.scdn.co/1mage/4£25297750d£24051195c36809904916b841a23" , 
34 "width": 64 
4 





"Band of Horses" 
8. 




















图 15-1 Spotify 中 用 来 获取 艺术 家 的 服务 端点 
但 是 对 于 这 个 测试 ， 我 们 仅 需要 name 和 images 属 性 。 
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调用 setResponse 时 ， 响 应 会 作用 于 后 面 所 有 调用 服务 方法 的 下 一 轮 调用 过 程 。 在 本 例 中 ， 











我 们 要 的 结果 是 getArtist 方 法 返回 此 响应 。 











接 下 来 ,通过 路 由 器 定位 并 进行 advance 人 处理 ,现在 视图 已 经 生成 ,可 以 使 用 组 件 视图 的 DOM 























表现 形式 检测 是 否 已 经 正确 地 生成 了 艺术 家 。 
fixture.debugElement .nativeElement 一 行 中 读 取 DebugElement 的 nativeElement 属 履 
以 做 到 这 一 点 。 








EH 


fere rp, 36119] 8H gae BL ERKAT, TEARDIPIESENEBARTIST NAME (W 





自 上 面 的 artist 工 具 夹 )。 


为 了 检查 这 些 条 件 , 我 们 用 到 了 NativeElement 的 querySelector 方 法 。 此 方法 会 返回 与 CSS 


选择 右 匹 配 的 第 一 个 元 素 。 
对 于 H1， 我 们 检测 其 文本 内 容 确 实 是 ARTIST NAME, ， 而 图 片 的 src 属 性 值 为 IMAGE 1. 
至 此 ， 我 们 已 经 完成 了 对 ArtistComponent 组 件 的 测试 。 











15.10 ”测试 表单 








为 了 演示 为 表单 编写 测试 ， 我们 使 用 在 第 5 章 中 创建 的 DemoFormNgMode1l 组 件 。 这 个 例子 很 





不 错 ， 因 为 它 用 到 了 Angular 表 单 的 一 些 特性 : 


a 使 用 FormBui lder 
口 包含 表单 验证 
口 处 理事 件 


下 面 是 这 个 类 的 完整 代码 。 




















code/forms/app/forms/demo form with events.ts 


import ( Component } from 'Gangular/core'; 
import { 

FormBuilder, 

FormGroup, 

Validators, 

AbstractControl 

from 'Gangular/forms'; 


—— 


GComponent ( { 
selector: 'demo-form-with-events', 
template: ^ 
«div class-"ui raised segment"» 
«h2 class-"ui header"»Demo Form: with events«/h2» 
«form [formGroup]-"myForm" 
(ngSubmit)-"onSubmit(myForm.value)" 
class-"ui form"» 
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«div class-"field" 
[class.error]-"!sku.valid && sku.touched"» 
«label forz'"skuInput"»SKU«/label» 
«input type="text" 
class-"form-control" 
idz"skuInput" 
placeholder-"SKU" 
[ formControl]-2"sku"» 
«div «ngIfz"!sku.valid" 
class-"ui error message"»SKU is invalid«/div» 
«div «nglIfz"sku.hasError('required')" 
class-"ui error message"»SKU is required«/div» 
«/div» 


«div xngIfz"!myForm.valid" 
class-"ui error message"»Form is invalid«/div» 


«button type="submit" class-"ui button"»Submit«/button» 
«/ form» 
«/div» 
I» 
export class DemoFormWithEvents { 
myForm: FormGroup; 
Sku: AbstractControl; 


constructor(fb: FormBuilder) { 
this.myForm = fb.group(( 
sku': ['', Validators.required] 


this.sku = this.myForm.controls['sku']; 


this.sku.valueChanges.subscribe( 
(value: string) => { 
console.log('sku changed to:', value); 
j 
); 
this.myForm.valueChanges.subscribe( 
(form: any) => { 
console.log('form changed to:', form); 


} 
); 


j 


onSubmit(form: any): void { 
console.log('you submitted value:', form.sku); 


I | 
} 
回顾 一 下 ， 这 上段 代码 包含 以 下 行为 : 
口 当 没 有 值 填充 SKU 字 上 段 时 ,会 显示 两 条 验证 错误 信息 ， 分 别 是 SKU is invalid 和 SKU is 























TIT 











图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) zs 尊重 版 权 





required; 
Q 当 SKU 字 段 的 值 发 生 改 变 时 ， 在 控制 台 打 印 一 条 日 志 信 息 ; 
口 当 表 单 发 生 改 变 时 ， 也 在 控制 台 打印 一 条 日 志 信 息 ; 
O 当 提交 表单 时 ， 在 控制 台 打 印 最 后 一 条 日 志 信 息 。 
很 显然 , 我 们 用 到 了 一 个 外 部 依赖 ， 即 控制 台 。 正 如 我 们 之 前 学 到 的 那样 ， 必 须 用 一 些 技巧 
来 模拟 所 有 外 部 依赖 。 

















15.10.1 创建 一 个 ConsoleSpy 


这 次 不 用 Spyobject 来 创建 伪 对 象 。 既 然 我 们 所 有 使 用 console 的 场景 都 是 调用 1og 方 法 ,可 
以 让 事情 更 简单 一 些 。 
用 我 们 能 够 掌控 的 ConsoleSpy 替 换 原 来 依赖 于 window.console 对 象 的 console 实 例 。 


code/forms/test/util.ts 








export class ConsoleSpy { 
public logs: string[] = []; 
log(...args) { 
this.logs.push(args.join(' ')); 


warn(...args) ( 
this.log(...args); 
} 
} 
consolespy 会 接收 所 有 日 志 记录 , 简单 地 转换 成 字符 串 , 并 存储 在 其 内 部 一 个 日 志 记 录 字 符 


串 列 表 中 。 


在 我 们 的 console.1og 版 本 中 ， 为 了 接收 可 变 参 数 ， 我 们 使 用 ES6 和 TypeScript 
的 Rest 参 数 "。 
这 个 操作 符 由 省 略 号 表示 ， 如 我 们 的 函数 参数 . . .theArgs。 简单 概括 ， 使 用 它 
表示 我 们 将 接收 从 点 号 起 所 有 剩余 的 参数 。 例如 (a，b，...theArgs) 调 用 了 
func(1，2，3，4，5)， 那 么 a 应 该 是 1:，b 应 该 是 32， 而 theArgs 应 该 包含 数组 
[3, 4, 5]。 
如 果 你 安装 了 最 新 的 Node.js”， 可 以 自己 尝试 一 下 : 
$ node —-harmony 
> var test = (a, b, ...theArgs) => console.log('a-',a, bz',b, 'theArgs-',theArgs); 
undefined 


» test(1,2,3,4,5); 
a= 1 b= 2 theArgs- [ 3, 4, 5 ] 





(D https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest parameters 
(25 https://nodejs.org/en/ 
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这 样 , 我 们 并 不 把 它 写 进 控制 台 本 身 ， 而 是 将 它 存储 在 一 个 数组 中 。 如 果 在 测试 下 面 的 代码 
调用 了 console.10g 三 次 : 








console.log('First message', 'is', 123); 
console.log('Second message'); 
console.log('Third message'); 


我 们 期 望 _ 1ogs 字 段 中 包含 一 个 数组 ['First message is 123', 'Second message', 'Third 


message ' ] 。 


15.10.2 安装 ConsoleSpy 


为 了 在 测试 中 使 用 探 子 ， 我 们 声明 了 两 个 变量 : originalConsole 和 fakeConsole。 前 者 存 
放 一 份 原始 控制 台 实 例 的 引用 ， 后 者 则 存放 控制 台 的 模拟 版 本 。 我 们 还 声明 了 一 些 有 助 于 测试 
input 和 form 元 素 的 变量 。 








code/forms/test/forms/demo form with events.spec.ts 


describe('DemoFormWithEvents', () => { 
let originalConsole, fakeConsole; 
let el, input, form; 


下 面 可 以 安装 这 个 伪 控 制 台 ,指定 提供 者 。 


code/forms/test/forms/demo form with events.spec.ts 


beforeEach(() => ( 
// replace the real window.console with our spy 
fakeConsole - new ConsoleSpy(); 
originalConsole - window.console; 
(«any»window).console - fakeConsole; 


TestBed.configureTestingModule(( 
imports: [ FormsModule, ReactiveFormsModule ], 
declarations: [ DemoFormWithEvents ] 
D); 
2r 


回 到 测试 代码 ， 下 面 要 做 的 是 将 真实 控制 台 替 换 成 我 们 的 模板 版 本 ， 换 掉 原 始 实例 。 
后 ， 在 afterAl1 方 法 中 将 原始 控制 台 实 例 还 原 ， 以 免 对 其 他 测试 造成 泄漏 〈1leak )。 








code/forms/test/forms/demo form with events.spec.ts 


// restores the real console 
afterAll(() => («any»window).console = originalConsole); 


15.10.3 配置 测试 模块 


注意 , 我 们 在 beforeEach 块 中 调用 了 TestBed.configureTestingModule。 要 记 住 configure- 
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TestingModule 方 法 为 测试 设置 了 根 NgModule。 
我 们 在 本 例 中 导入 了 两 个 表单 模块 ， 声 明了 一 个 DemoFormWithEvents 组 件 。 
现在 我 们 可 以 操控 控制 台 了 ， 下 面 开 始 测试 表单 。 





15.10.4 测试 表单 
现在 需要 对 验证 错误 信息 和 表单 事件 进行 测试 。 
首先 要 做 的 是 取得 SKU 输 入 字段 和 表单 元 素 的 引用 。 


code/forms/test/forms/demo form with events bad.spec.ts 


it('validates and triggers events', fakeAsync((tcb) => ( 
let fixture = TestBed.createComponent(DemoFormWithEvents); 


let el = fixture.debugElement.nativeElement; 

let input - fixture.debugElement.query(By.css('input')).nativeElement; 
let form = fixture.debugElement.query(By.css('form')).nativeElement; 
fixture.detectChanges(); 


最 后 一 行 通知 Angular 提 交 所 有 未 完成 的 变更 , 正如 我 们 在 15.8 节 所 做 的 那样 。 接 下 来 将 SKU 
输入 值 设 置 为 空 字符 串 。 


code/forms/test/forms/demo form with events bad.spec.ts 























input.value = ''; 
dispatchEvent(input, 'input'); 
fixture.detectChanges(); 
tick(); 


这 里 我 们 用 dispatchEvent 通 知 Angular 输 入 元 素 发 生 了 变更 , 再 一 次 触发 变更 检测 。 最 后 用 
tick( ) 确 保 此 时 已 触发 的 所 有 异步 代码 都 已 经 执行 。 


在 这 个 测试 中 使 用 fakeAsync 和 tick 的 目的 就 是 为 了 确保 表单 事件 被 触发 。 如 果 使 用 async 
和 inject 替 代 ， 就 必须 在 事件 被 触发 前 运行 所 有 代码 。 


现在 我 们 已 经 修改 了 输入 值 ， 需 要 确保 表单 验证 生效 。( 使 用 el 变量 ) 查询 组 件 元 素 ， 寻 找 
是 错误 信息 的 所 有 子 元 素 ， 并 确保 错误 信息 已 经 显示 。 


code/forms/test/forms/demo form with events bad.spec.ts 


























let msgs - el.querySelectorAll('.ui.error.message'); 
expect(msgs[0].innerHTML).toContain('SKU is invalid'); 
expect(msgs[1].innerHTML).toContain('SKU is required'); 


Bi Fo EC, ， 不 过 这 次 在 SKU 字 段 输 入 一 个 值 。 


code/forms/test/forms/demo form with events bad.spec.ts 





input.value - 'XYZ'; 
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dispatchEvent(input, 'input'); 
fixture.detectChanges(); 
tick(); 


确保 所 有 的 错误 信息 消失 。 


code/forms/test/forms/demo form with events bad.spec.ts 


msgs - el.querySelectorAll('.ui.error.message'); 
expect(msgs.length).toEqual(0); 


最 后 ， 我 们 触发 表单 的 提交 事件 。 


code/forms/test/forms/demo form with events bad.spec.ts 


fixture.detectChanges(); 
dispatchEvent(form, 'submit'); 
tick(); 


最 终 ， 我 们 要 确保 在 提交 表单 时 ， 通 过 检查 打印 到 控制 台 的 日 志 信息 来 确定 事件 被 触发 。 





code/forms/test/forms/demo form with events bad.spec.ts 


// checks for the form submitted message 
expect(fakeConsole.logs).toContain('you submitted value: XYZ'); 


我 们 可 以 继续 为 另外 两 个 事件 添加 新 的 检验 : SKU 变 更 和 表单 变更 。 然 而 , 我 们 的 测试 代码 
越 来 越 见 长 。 
运行 测试 ， 可 以 看 到 测试 通过 ， 如 图 15-2 所 示 。 


DemoFormWithEvents 
w validates and trigger events 


图 15-2 ”DemoFormWithEvents 测 试 输出 
测试 本 身 没有 问题 ， 但 我 们 在 代码 风格 上 闻 到 了 一 些 坏 味道 : 


a 一 个 超 长 的 it 条 件 (超过 5~10 行 ); 
OQ 每 个 it 中 不 止 一 两 个 expect; 
0 测试 描述 中 使 用 了 and 一 词 。 






































15.10.5 ” 重 构 表单 测试 
解决 问题 的 第 一 步 就 是 将 创建 组 件 、 获 取 组 件 元 素 和 用 于 输入 和 表单 元 素 的 代码 从 中 抽取 


code/forms/test/forms/demo form with events.spec.ts 























function createComponent(): ComponentFixture«any» [f 
let fixture = TestBed.createComponent(DemoFormWithEvents); 
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el = fixture.debugElement.nativeElement; 

input = fixture.debugElement.query(By.css('input')).nativeElement; 
form = fixture.debugElement.query(By.css('form')).nativeElement; 
fixture.detectChanges(); 


return fixture; 


j 
createComponent 代 码 相当 简明 : 使 用 TestBed .createComponent 创 建 组 件 ， 获取 所 有 元 素 
并 调用 detectChanges。 


现在 第 一 个 要 测试 的 是 ， 提 供 一 个 空 的 SKU 字 段 ， 我 们 应 该 看 到 两 条 错误 信息 。 








code/forms/test/forms/demo form with events.spec.ts 


it('displays errors with no sku', fakeAsync( () => { 
let fixture - createComponent(); 
input.value = ''; 
dispatchEvent(input, 'input'); 
fixture.detectChanges(); 


// no value on sku field, all error messages are displayed 

let msgs - el.querySelectorAll('.ui.error.message'); 

expect(msgs[0].innerHTML).toContain('SKU is invalid'); 

expect(msgs[1].innerHTML).toContain('SKU is required'); 
})); 


如 你 所 见 ， 代 码 清 晰 了 很 多 。 测 试 很 专注 ， 而 且 只 测试 一 件 事 。 太 棒 了 ! 
在 新 的 结构 中 添加 第 二 个 测试 也 很 简单 。 这 次 要 测试 的 是 , 一 旦 给 SKU 字 段 赋值 ,错误 信息 
就 会 消失 。 


code/forms/test/forms/demo form with events.spec.ts 








it('displays no errors when sku has a value', fakeAsync( () => { 
let fixture = createComponent(); 
input.value - 'XYZ'; 
dispatchEvent(input, 'input'); 
fixture.detectChanges(); 


let msgs - el.querySelectorAll('.ui.error.message'); 
expect(msgs.length).toEqual(0); 
})); 


你 可 能 注意 到 了 一 点 : 到 目前 为 止 , 我 们 的 测试 代码 并 没有 使 用 fakeAsync ,而 是 使 用 async 
和 inject 替 代 。 


这 次 重 构 的 另 一 个 好 处 是 ， 仅 在 当 我 们 检查 是 否 有 信息 发 送 到 控制 台 时 才 使 用 fakeAsync 和 
tick() ， 因 为 这 正 是 由 表单 事件 处 理 融 负责 的 。 


下 一 个 测试 恰恰 是 : 当 SKU 值 发 生变 更 时 ， 我 们 应 该 有 一 条 信息 发 送 到 控 洁 



































Ei 
c 
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code/forms/test/forms/demo form with events.spec.ts 


it('handles sku value changes', fakeAsync( () => { 
let fixture - createComponent(); 
input.value - 'XYZ'; 
dispatchEvent(input, 'input'); 
tick(); 


expect(fakeConsole.logs).toContain('sku changed to: XYZ'); 
IODE 


对 于 表单 变更 进行 同样 的 处 到 


code/forms/test/forms/demo form with events.spec.ts 


it('handles form changes', fakeAsync(() => { 
let fixture - createComponent(); 
input.value - 'XYZ'; 
dispatchEvent(input, 'input'); 
tick(); 


na 





o 


expect(fakeConsole.logs).toContain('form changed to: [object Object]'); 
})); 


对 于 表单 提交 事件 也 进行 同样 的 处 理 。 


code/forms/test/forms/demo form with events.spec.ts 


it('handles form submission', fakeAsync((tcb) => { 
let fixture = createComponent(); 
input.value - 'ABC'; 
dispatchEvent(input, 'input'); 
tick(); 


fixture.detectChanges(); 
dispatchEvent(form, 'submit'); 
tick(); 


expect(fakeConsole.logs).toContain('you submitted value: ABC'); 


D); 
再 次 运行 测试 ， 会 得 到 更 清晰 的 输出 结果 ， 如 图 15-3 所 示 。 


DemoFormWithEvents 
w displays errors with no sku 
4 displays no errors when sku has a value 


w handles sku value changes 
w handles form changes 


w handles form submission 
图 15-3 ” 重 构 后 的 DemoFormWithEvents 测 试 输出 cm 


这 次 重 构 的 另外 一 个 好 处 是 ,出 错时 一 眼 就 可 以 看 出 来 。 回 到 组 件 代 码 , 在 提交 表单 时 更 改 
消息 ， 从 而 强制 一 个 测试 失败 。 
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onSubmit(form: any): void { 
console.log('you have submitted the value:', form.sku); 


j 
如 果 运 行 之 前 版 本 的 测试 ， 可 能 看 到 如 图 15-4 所 示 的 结 


DemoFormWithEvents 


Expected [ 'sku changed to: ', 'form changed to: [object Object]', 'sku changed to: XYZ', 'form cha 
nged to: [object Object]', 'you have submitted the value: XYZ' ] to contain 'you submitted value: XYZ'. 


at /Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:41894 

at run (/Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:5942) 

at zoneBoundFn (/Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:5915) 

at lib$es6$promise$$internal$$tryCatch (/Users/fcoury/code/ng-book2/manuscript/code/forms/test. 





图 15-4 重 构 前 的 DemoFormWithEvents 错 误 输 出 


它 不 会 立即 显示 失败 的 原因 所 在 。 我 们 必须 通过 错误 代号 来 明白 提交 的 信息 失败 了 。 我 们 也 
肯定 这 是 破坏 组 件 的 唯一 事件 ， 因 为 还 可 能 有 其 他 测试 条 件 在 遭遇 失败 时 根本 没有 机 会 运 

































































现在 比较 一 下 在 重 构 过 的 代码 上 得 到 的 错误 信息 ， 如 图 15-5 所 示 。 


DemoFormWithEvents 
w displays errors with no sku 
w displays no errors when sku has a value 
w handles sku value changes 
w handles form changes 


Expected [ 'sku changed to: ABC', 'form changed to: [object Object]', 'you have submitted the 
alue: ABC' ] to contain 'you submitted value: ABC'. 
at /Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:41673 
at run (/Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:5942) 
at zoneBoundFn (/Users/fcoury/code/ng-book2/manuscript/code/forms/test.bundle.js:5915) 
at lib$es6$promise$$internal$$tryCatch (/Users/fcoury/code/ng-book2/manuscript/code/forms/ 





图 15-5 重 构 后 的 DemoFormWithEvents 错 误 输 出 


这 个 版 本 很 清晰 ， 唯 一 失败 的 是 表单 提交 事件 。 








pum 


15.11 测试 HTTP 请 求 
我 们 可 以 采用 与 之 前 相同 的 策略 来 测试 HTTP 交 互 : 写 一 个 Http 类 的 模拟 版 本 ， 因 为 它 是 一 
个 外 部 依赖 。 


但 是 因为 绝 大 多 数 使 用 Angular 编 写 的 单 页 面 程序 都 是 使 用 HTTP 与 API 交 互 的 ， 所 以 Angular 
测试 类 库 已 经 提供 了 一 个 内 置 的 替代 品 : MockBackend。 


本 章 之 前 测试 SpotifyService 类 时 已 经 用 到 过 


现在 继续 深入 , 见识 一 下 更 多 的 测试 场景 , 也 可 以 获得 更 好 的 编程 实践 。 为 了 实现 这 个 目的 ， 
我 们 为 第 6 章 的 例子 编写 测试 。 
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首先 ， 一 起 看 看 如 何 测试 不 同 的 HTTP 方 法 ， 如 POST 和 DELETE ， 还 有 如 何 测 试 正 要 发 送 正确 
的 HITP 头 信息 。 


回 到 第 6 章 ， 我 们 创建 的 这 个 实例 包括 了 如 何 使 用 Http 实 现 达到 目的 。 





15.11.1 测试 PoST 方法 
第 一 个 要 写 的 测试 是 确保 makePost 方 法 发 送 一 条 正确 的 POST 请 求 。 








code/http/app/ts/components/MoreHTTPRequests.ts 


makePost(): void ( 
this.loading - true; 
this.http.post( 
'http://jsonplaceholder.typicode.com/posts', 
JSON.stringify(( 


body: 'bar', 
title: 'foo', 
userId: 1 


.subscribe((res: Response) => { 
this.data - res.json(); 
this.loading - false; 

; 

j 


为 这 个 方法 编写 测试 时 ， 目 的 是 测试 两 点 : 
(1) 请 求 方法 (POST) 是 正确 的 ; 

(2) 目标 URL 也 是 正确 的 。 

下 面 把 这 个 想法 变 成 测试 。 


code/http/test/: MoreHTTPRequests.spec.ts 


it('performs a POST', 
async(inject([MockBackend], (backend) => ( 
let fixture = TestBed.createComponent (MoreHTTPRequests); 
let comp = fixture.debugElement.componentlinstance; 



































backend.connections.subscribe(c -» { 
expect(c.request.url) 
.toBe( 'http://jsonplaceholder.typicode.com/posts'); 
expect(c.request.method).toBe(RequestMethod.Post); 
c.mockRespond(new Response(«any»[body: '("response": "OK"}'})) 


); 





comp .makePost(); 
expect(comp.data).toEqual(['response': 'OK'}); 
})) 
); 
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注意 ， 可 以 在 backend .connections 上 调用 subscribe 方 法 。 每 当 有 新 连接 建立 时 就 会 触发 
我 们 的 代码 ， 这 提供 了 检查 请 求 内 容 的 机 会 ， 并 可 以 按 预期 设置 响应 结果 。 


这 里 ， 你 也 可 以 ， 


口 添加 请 求 断言 语句 ， 比 如 检查 请 求 的 URL 和 HTTP 方 法 是 否 正确 ; 
a 设置 模拟 的 响应 结果 ， 强 制 代码 根据 不 同 的 测试 场景 作出 不 同 的 响应 。 


Angular 使 用 一 个 名 为 RequestMethod 的 enum 来 判别 不 同 的 HTTP 方 法 。 这 里 是 支持 的 方法 。 












































export enum RequestMethod { 
Get, 

Post, 

Put, 

Delete, 

Options, 

Head, 

Patch 





j 
最 后 ， 在 调用 makePost( ) 后 ， 我 们 再 次 检查 以 确保 预 设 的 响应 就 是 分 配给 组 件 的 那个 。 
现在 我 们 理解 了 其 工作 原理 ， 针 对 DELETE 方 法 增加 一 个 测试 并 不 难 。 











15.11.2 ”测试 DELETE 方法 

















这 是 makeDelete 方 法 的 具体 实现 。 


code/http/app/ts/components/MoreHTT PRequests.ts 


makeDelete(): void { 
this.loading - true; 
this.http.delete('http://jsonplaceholder.typicode.com/posts/1') 
.subscribe((res: Response) => ( 
this.data = res. json(); 
this.loading - false; 
37 
j 


这 是 我 们 用 来 测试 它 的 代码 。 


code/http/test/: MoreHTTPRequests.spec.ts 


it('performs a DELETE', 
async(inject([MockBackend], (backend) => { 
let fixture = TestBed.createComponent(MoreHTTPRequests); 
let comp = fixture.debugElement.componentlInstance; 

















backend.connections.subscribe(c => { 
expect(c.request.url) 
.toBe( 'http://jsonplaceholder.typicode.com/posts/1'); 
expect(c.request.method).toBe(RequestMethod.Delete); 
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c.mockRespond(new Response(«any»[body: '{"response": "OK"}'})) 


}); 


comp.makeDelete(); 
expect(comp.data).toEqual(['response': 'OK'}); 
})) 


除了 URL 和 HTTP 方 法 (这 里 使 用 RequestMethod.Delete ) 稍 有 不 同 , 代码 并 无 太 大 的 差异 。 





15.41.3 测试 HTTP 3k 


针对 这 个 类 ， 最 后 一 个 要 测试 的 方法 是 makeHeaders。 




















code/http/app/ts/components/MoreHTTPRequests.ts 


makeHeaders(): void { 
let headers: Headers - new Headers(); 
headers.append('X-API-TOKEN', 'ng-book'); 


let opts: RequestOptions - new RequestOptions(); 
opts.headers - headers; 


this.http.get('http://jsonplaceholder.typicode.com/posts/1', opts) 
.subscribe((res: Response) -» ( 
this.data - res.json(); 
; 
j 


在 本 例 中 ,我 们 的 测试 应 该 集中 在 确保 X-API-TOKEN 头 被 正确 地 设置 为 ng-book。 


code/http/test/MoreHTTPRequests.spec.ts 


it('sends correct headers', 
async(inject([MockBackend], (backend) => ( 
let fixture = TestBed.createComponent (MoreHTTPRequests); 
let comp = fixture.debugElement.componentlinstance; 








backend.connections.subscribe(c -» { 
expect(c.request.url) 

.toBe( 'http://jsonplaceholder.typicode.com/posts/1'); 
expect(c.request.headers.has( 'X-API-TOKEN' ) ) .toBeTruthy( ) ; 
expect(c.request.headers.get('X-API-TOKEN' ) ).toEqual( 'ng-book ' ); 
c.mockRespond(new Response(«any»[body: '("response": "OK"}'})) 


5; 


comp .makeHeaders( ); 


expect(comp.data).toEqual(['response': 'OK'}); 
})) 


请 求 连接 的 request .headers 属 性 会 返回 一 个 Headers 实 例 。 我 们 使 用 两 个 方法 执行 两 个 不 
同 的 断言 : 
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O nas 方法 检查 指定 的 头 是 否 已 经 设置 ， 忽 略 其 值 ; 
口 get 方 法 返回 设置 的 值 。 


如 果 只 检查 是 否 设置 了 头 即 可 ， 使 用 nas 。 如 果 需 要 检测 其 设置 的 值 ， 要 使 用 get。 


到 此 为 止 , 我 们 完成 了 Angular 中 不 同 HTTP 方 法 和 头 的 测试 。 现 在 转向 一 个 更 为 复杂 的 例子 ， 
它 与 你 在 编写 真实 程序 时 遇 到 的 场景 非常 接近 。 

















15.11.4 测试 YouTubeService 





我 们 在 第 6 章 构建 的 另外 一 个 实例 是 YouTube 视 频 搜 索 。 在 这 个 实例 中 ，HTTP 交 互 过 程 包含 
在 YouTubeService 类 中 。 








code/http/app/ts/components/YouTubeSearchComponent.ts 


/** 
* YouTubeService connects to the YouTube API 
* See: x https://developers.google.com/youtube/v3/docs/search/list 
*/ 
GInjectable() 
export class YouTubeService { 
constructor(private http: Http, 
GInject(YOUTUBE API KEY) private apiKey: string, 
GInject(YOUTUBE API URL) private apiUrl: string) ( 
j 


search(query: string): Observable«SearchResult[]» { 
let params: string - [ 
`q=${query}`, 
`key=${this.apiKey}`, 
^part-snippet', 
^type-video', 
^maxResults-10" 
]-join('&'); 
let queryUrl: string = `${this.apiUrl}?${params}`; 
return this.http.get(queryUrl) 
.map((response: Response) => ( 
return («any»response.json()).items.map(item => { 
// console.log("raw item", item); // uncomment if you want to debug 
return new SearchResult((í 
id: item.id.videoId, 
title: item.snippet.title, 
description: item.snippet.description, 
thumbnailUrl: item.snippet.thumbnails.high.url 





它 利用 YouTube API 搜 索 视 频 ， 解 析 结 果 并 保存 到 一 个 SearchResult 实 例 中 。 
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code/http/app/ts/components/YouTubeSearchComponent.ts 


class SearchResult { 
id: string; 
title: string; 
description: string; 
thumbnailUrl: string; 
videoUrl: string; 


constructor(obj?: any) 
this.id obj && obj.id null; 
this.title obj && obj.title null; 


this.description 
this.thumbnailUrl 
this.videoUrl 


obj && obj.thumbnailUrl null; 
obj && obj.videoUrl 
"https: //www.youtube.com/watch?v-$[this.id])'; 


Won n n H c 


E 
E 
obj && obj.description || null; 
I] 
E 


j 
} 


我 们 需要 测试 这 个 服务 的 几 个 重要 方面 : 

a 给 定 一 个 JSON 响 应 ， 服 务 能 够 分 析出 视频 的 id、 标 题 (title )、 描 述 ( description ) 和 缩 略 
图 (thumbnail ) 属性 ; 

a 我 们 请 求 的 URL 使 用 了 提供 的 搜索 关键 字 ; 

Q URL 前 级 设置 在 YOUTUBE_API_URL 常 量 中 ; 

口 使 用 的 API 键 值 与 YOUTUBE_API_KEY 常 量 匹 配 。 


记 住 这 些 ， 开 始 编写 测试 。 


code/http/test/YouTubeSearchComponentBefore.spec.ts 


describe('MoreHTTPRequests (before)', () => { 
beforeEach(() => { 
TestBed.configureTestingModule({ 
providers: [ 
YouTubeService, 
BaseRequestOptions, 
MockBackend, 
( provide: YOUTUBE API KEY, useValue: 'YOUTUBE API KEY' ), 
( provide: YOUTUBE API URL, useValue: 'YOUTUBE API URL' ), 
{ provide: Http, 
useFactory: (backend: ConnectionBackend, 
defaultOptions: BaseRequestOptions) -» { 
return new Http(backend, defaultOptions); 
}, deps: [MockBackend, BaseRequestOptions] ] 






































P 


和 之 前 写 测 试 的 准备 工作 一 样 ， 首 先 配置 依赖 : 这 里 我 们 使 用 真实 的 YouTubeService, 但 
YOUTUBE_API_KEY 和 YOUTUBE_API_URL 使 用 伪 值 。 同 时 配置 Http 类 使 用 一 个 MockBackend 类 。 
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现在 ,开始 写 第 一 个 测试 用 例 。 


code/http/test/YouTubeSearchComponentBefore.spec.ts 


describe('search', () => { 
it('parses YouTube response', 
inject([YouTubeService, MockBackend], fakeAsync((service, backend) => { 
let res; 


backend.connections.subscribe(c -» { 
c.mockRespond(new Response( «any»( 


body: ^ 
( 
"items": [ 
( 
"id": { "videoId": "VIDEO ID" }, 
"snippet": { 


"title": "TITLE", 
"description": "DESCRIPTION", 
"thumbnails": { 

"high": ( "url": "THUMBNAIL URL" } 


231r 
})); 
}); 
service.search('hey').subscribe( res => ( 
res = res; 
3) 
tick(); 


let video = res[90]; 
expect(video.id).toEqual('VIDEO ID'); 
expect(video.title).toEqual( TITLE'); 
expect(video.description).toEqual( 'DESCRIPTION' ) ; 
expect(video.thumbnailUrl).toEqual( 'THUMBNAIL. URL ' ) ; 
1) 
) 
1); 


这 里 我 们 通知 Http 返 回 一 个 伪 响 应 结果 ， 与 调用 真实 URL 时 期 望 YouTube API 返 回响 应 结果 
的 相关 字段 一 致 。 这 可 以 通过 调用 连接 的 mockRespond 方 法 实现 。 




















code/http/test/YouTubeSearchComponentBefore.spec.ts 


service.search('hey').subscribe( res => ( 
res - res; 


p 
tick(); 


接 下 来 调用 我 们 要 测试 的 方法 ; search。 调 用 时 使 用 关键 字 hey, 并 抓 取 响 应 结果 保存 在 res 
变量 中 。 


你 之 前 可 能 注意 到 了 ， 我 们 使 用 的 是 fakeAsync ， 它 需要 手动 调用 tick( ) 来 同步 异步 代码 。 
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这 里 沿用 这 种 模式 ， 期 望 搜索 完成 了 执行 过 程 ， 并 且 res 已 经 保存 了 结 
现在 就 可 以 验证 结果 值 了 。 


code/http/test/YouTubeSearchComponentBefore.spec.ts 














let video = res[0]; 
expect(video.id).toEqual('VIDEO ID'); 
expect(video.title).toEqual('TITLE'); 
expect(video.description).toEqual( DESCRIPTION'); 
expect(video.thumbnailUrl).toEqual( 'THUMBNAIL URL '); 


从 响应 列表 中 读 取 第 一 个 元 素 。 我 们 已 知 它 是 SearchResult ， 现 在 要 基于 之 前 预 设 的 响应 
结果 检查 每 个 属性 设置 正确 无 误 : id、 标 题 、 描 述 和 缩 略 图 URL 应 该 全 部 匹配 。 


至 此 , 我 们 完成 了 写 测试 的 第 一 个 目标 。 然 而 , 刚才 不 是 说 使 用 一 个 超大 让 的 方法 并 使 用 太 
多 的 expect 产 生 了 代码 坏 味道 吗 ? 


的 确 是 ， 所 以 在 继续 前 进 之 前 ， 先 对 代码 进行 重 构 ， 从 而 能 更 容易 地 使 用 单独 的 断言 。 
在 describe('search'，... ) 内 部 添加 以 下 辅助 函数 。 


code/http/test/YouTubeSearchComponentAfter.spec.ts 
































function search(term: string, response: any, callback) { 
return inject([YouTubeService, MockBackend], 
fakeAsync((service, backend) => ( 
var req; 
var res; 


backend.connections.subscribe(c => { 
req = c.request; 
c.mockRespond(new Response(<any>{body: response])); 


IDE 

service.search(term).subscribe( res => { 
res - res; 

D); 

tick(); 


callback(req, res); 
» 
) 
j 


一 起 看 看 这 个 函数 如 何 工 作 : 它 使 用 inject 和 fakeAsync 完 成 了 与 之 前 同样 的 任务 , 不 同 的 
是 它 使 用 了 一 种 配置 的 方式 。 我 们 提供 了 一 个 搜索 关键 字 、 一 个 响应 和 一 个 回调 函数 。 有 了 这 些 
参数 , 我 们 使 用 搜索 关键 字 调 用 search 方 法 , 设置 好 伪 响 应 结果 , 并 在 完成 请 求 时 调用 回调 函数 ， 
从 而 提供 请 求 和 响应 对 象 。 
使 用 这 种 方法 ， 测 试 只 需要 调用 这 个 函数 并 检查 其 中 一 个 对 象 即 可 。 
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将 之 前 写 的 测试 拆 分 成 四 个 测试 ， 每 个 测试 针对 一 种 不 同 的 响应 结果 。 





code/http/test/YouTubeSearchComponentA fter.spec.ts 


it('parses YouTube video id', search('hey', response, (req, res) => { 
et video = res[0]; 

expect(video.id).toEqual('VIDEO ID'); 

) 


it('parses YouTube video title', search('hey', response, (req, res) => { 
et video = res[0]; 

expect(video.title).toEqual('TITLE'); 

D) 





it('parses YouTube video description', search('hey', response, (req, res) =>\ 


let video = res[0]; 
expect(video.description).toEqual( DESCRIPTION ); 
5; 


it('parses YouTube video thumbnail', search('hey', response, (req, res) — { 
let video = res[0]; 
expect(video.description).toEqual( DESCRIPTION ' ) ; 

9335; 


看 起 来 不 错 吧 ? 这 个 小 而 且 专 注 的 测试 只 有 一 个 测试 目的 。 太 棒 了 ! 
现在 为 余下 的 目标 添加 测试 代码 应 该 很 容易 了 。 





code/http/test/YouTubeSearchComponentA fter.spec.ts 


你 





15.12 


it('sends the query', search('term', response, (req, res) => { 
expect(req.url).toContain('q-term'); 


})); 


it('sends the API key', search('term', response, (req, res) => { 
expect(req.url).toContain( 'key-YOUTUBE API KEY' 


); 


1 


Wn 


it('uses the provided YouTube URL', search('term', response, (req, res) — { 
expect(req.url).toMatch(/^YOUTUBE  API URLM?2/) ; 
H); 


可 以 按照 自己 的 想法 随意 加 入 更 多 的 测试 。 比 如 , 针对 响应 结果 中 包含 多 个 条 目 并 有 不 同 
的 属性 添加 一 个 测试 。 看 看 代码 中 是 否 有 你 想 进 行 测试 的 其 他 方面 。 























总 结 


/AN 二 口 





Angular 团 队 在 为 Angular 提 供 测试 功能 方面 做 了 大 量 的 工作 。 这 样 我 们 才能 轻松 地 测试 应 用 





之 力 。 


程序 的 方方面面 : 从 控制 器 到 服务 类 、 表 单 和 HTTP。 本 来 坏 手 的 异步 代码 测试 现在 也 不 费 吹 灰 
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如 果 你 使 用 过 一 段 时 间 的 Angular， 那 么 可 能 已 经 有 了 基于 AngularJS 的 产品 。Angular 虽 然 很 
好 ,但 我 们 总 不 能 抛弃 现 有 的 一 切 ,用 Angular 重 写 整 个 产品 吧 ? 更 好 的 做 法 是 对 既 有 的 AngularJS 
应 用 进行 增 量 式 升 级 。 谢 天 谢 地 ，Angular 提 供 了 一 种 非常 棒 的 方式 来 实现 它 ! 

AngularJS 和 Angular 的 互 操作 性 已 经 相当 完善 。 在 本 章 中 ， 我 们 将 讨论 如 何 通过 写 混 合式 应 
用 的 方式 来 把 AngularJS 升 级 到 Angular。 这 种 混合 式 应 用 中 同时 运行 着 AngularJS 和 Angular 框 架 
(它们 之 间 还 可 以 交换 数据 )。 























16.4 周边 概念 


当 我 们 讨论 AngularJS 和 Angular 之 间 的 互 操 作 性 时 ， 会 涉及 很 多 周边 概念 ， 下 面 就 是 其 中 的 
一 些 o 























把 AngularJS 的 概念 映射 到 Angular: 大 体 上 ，Angular 的 组 件 就 是 AngularJS 的 指令 。 它 们 也 都 
用 到 了 “服务 ”。 不 过 本 章 是 讲 如 何 同时 使 用 AngularJS 和 Angular 的 ， 所 以 我 们 假设 你 已 经 充分 了 
解 了 这 些 基础 知识 。 如 果 你 还 没 怎么 用 过 Angular， 请 先 阅读 第 3 章 。 

把 AngularJS 应 用 迁移 到 Angular 的 准备 工作 : AngularJS.5 提 供 了 新 的 .component 方 法 来 制作 
“组 件 型 指令 ”。 使 用 .component 有 利于 为 迁移 到 Angular 作 准备 ， 男 外 ， 创 建 瘦 控 制 器 (或 禁止 
使 用 ng-controller 指 令 ? ) 能 把 AngularJS 应 用 重 构 得 更 好 ， 也 更 容易 与 Angular 集 成 。 

准备 AngularJS 应 用 的 另 一 个 要 点 是 减少 或 消除 双向 绑 定 ， 更 多 地 使 用 单 向 数据 流 。 也 就 是 
说 ， 尽 量 不 要 通过 修改 $scope 在 指令 之 间 传 递 数据 ， 而 是 改 用 服务 。 

这 些 理念 确实 很 重要 ,有 必要 进行 深入 探索 , 但 本 章 并 不 会 针对 升级 前 的 重 构 阶 段 讲 很 多 类 
似 的 最 佳 实践 。 









































(D http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html 
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本 章 要 讲 的 是 下 面 这 一 点 。 

写 混合 式 AngularJS/Angular 应 用 : Angular 提 供 了 一 种 方式 来 启动 你 的 AngularJS 应 用 ， 然 后 
在 其 中 写 Angular 的 组 件 和 服务 。 写 完 Angular 组 件 , 只 要 把 它 和 AngularJS 组 件 混 在 一 起 就 可 以 了 。 
另外 ， 依 赖 注入 体系 也 支持 在 AngularJS 和 Angular 之 间 双 向 传递 数据 ， 因 此 你 写 的 服务 在 
AngularJS 和 Angular 中 都 能 运行 。 

它 最 大 的 好 处 是 什么 呢 ? 因为 变更 检测 是 在 Zones 中 运行 的 ， 所 以 你 再 也 不 用 调用 
$scope.apply 或 担心 变更 检测 方面 的 问题 了 。 




















16.2 我们 要 构建 什么 


在 本 章 中 ， 我们 准备 升级 一 个 名 叫 Interest 的 应 用 ， 它 模仿 了 Pinterest( 如 图 16-1 所 示 )。 其 思 
想 在 于 你 可 以 保存 一 枚 图 钉 (pin )， 即 一 个 带 图 片 的 链接 。 这 些 图 钉 会 显示 在 列表 中 ， 而 且 你 可 
以 收藏 (或 取消 收藏 ) 一 枚 图 钉 。 





BEN Dorset — x [mgbeok 











€ > Œ [5 localhost:8080/8/ 2 = 





Interest what youre interested in 


OLIVER OWL p 


sock pup The FunCraft Book of Pul i iat easy to make puppets - oliver ow! (detail) from 
Puppets 1976 ISBN: 0-590-11936-2 easy to make puppets by Joyce luckin (1975) 


二 tofutti break P3 MIKI Yoshihito (' «tu*) » gillifiower 





图 16-1 ”完成 后 的 “山寨 版 ”Pinterest 





你 可 以 到 code/conversion/AngularJS 和 code/conversion/hybrid 下 载 AngularJS 版 和 
混合 版 的 完整 代码 。 


在 深入 讲解 之 前 ， 我 们 先 来 看 看 AngularJS 和 Angular 互 操作 的 各 种 使 用 场景 。 
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16.3 把 AngularJS 映射 到 Angular 


大 体 来 说 ，AngularJS 的 五 个 主要 部 分 是 : 
a 指令 
D 控制 器 
a 作用 域 
a 服务 
OQ 依赖 注入 
这 些 在 Angular 中 则 发 生 了 显著 的 变化 。 你 可 能 听 说 过 , 来自 Angular 核 心 团队 的 Igor 与 Tobias 
在 2014 ngEurope 大 会 上 宣布 他 们 将 消灭 AngularJS 中 的 许多 “核心 ”思想 ?”( 如 图 16-2 所 示 )。 具 
体 来 说 ， 他 们 宣布 Angular 将 消灭 : 
口 $scope (以 及 默认 的 双向 绑 定 ) 
a 指令 定义 对 象 
D 控制 器 


Dangular.module 





























图 16-2 ”在 2014 ngEurope 大 会 上 ，Igor 和 Tobias 移 除了 AngularJS.x 的 很 多 API。 
BOX. Michael Bromley (已 获 授权 ) 











QD 视频 地 址 : https://www.youtube.com/watch?v-gNmWybAyBHI 
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那些 使 用 AngularJS 构 建 应 用 并 习惯 于 AngularJS 思 维 的 人 可 能 会 问 ， 如 果 移 除了 那些 ， 还 剩 
下 什么 ?” 没有 控制 器 和 $scope 怎 么 能 构建 Angular 应 用 呢 ? 

尽管 有 很 多 人 喜欢 夸大 Angular 的 不 同 之 处 , 但 其 实 它 仍然 沿袭 了 AngularJS 的 大 量 核心 思想 。 
有 实 上 ，Angular 用 一 种 更 简单 的 模型 实现 了 同样 的 功能 。 

大 体 上 ，Angular 的 核心 构造 为 : 
a 组 件 〈 可 看 作 指令 ) 
口 服务 


当然 , 还 需要 大 量 的 基础 设施 来 支撑 它们 的 工作 。 比 如 , 你 需要 用 依赖 注入 体系 来 管理 服务 ; 
需要 一 个 强力 的 变更 检测 机 制 , 以 便 在 应 用 中 更 有 效 地 传播 数据 变化 ; 还 需要 一 个 高 效 的 泻 染 层 ， 
以 便 在 正确 的 时 机 演 染 DOM 。 











iini 




















16.4 ”关于 互 操作 性 的 需求 


那么 ， 有 了 这 两 种 不 同 的 体系 ， 我 们 需要 借助 哪些 特性 来 简化 互 操作 性 呢 ? 


O 在 AngularJS 中 使 用 Angular 的 组 件 : 我 们 首先 想到 的 是 ， 要 能 写 出 新 的 Angular 组 件 ， 并 在 

AngularJS 的 应 用 中 使 用 它们 。 

O 在 Angular 中 使 用 AngularJS 的 组 件 : 我 们 一 般 不 会 把 整个 组 件 树 完全 替换 成 Angular 的 组 

件 ， 而 是 在 Angular 组 件 之 中 复 用 那些 AngularJS 组 件 。 

O 服务 共享 : 假设 我 们 有 一 个 UserService ， 想 要 在 AngularJS 和 Angular 之 间 共 享 它 。 服 务 

通常 就 是 一 个 普通 的 JavaScript 对 象 ， 因 此 更 抽象 地 说 ， 我 们 需要 的 是 一 个 能 文 持 互 操作 
的 依赖 注入 系统 。 

口 变更 检测 : 如 果 我 们 在 某 一 边 进行 了 改动 ， 这 些 变更 也 应 该 能 传播 到 另 一 边 。 

Angular 提 供 了 所 有 这 些 场景 的 解决 方案 ， 本 章 将 一 一 讲解 。 

在 本 章 中 ， 我 们 会 : 

口 描述 即将 升级 的 AngularJS 应 用 ; 

o 解释 如 何 用 Angular 的 UpgradeAdapter 来 组 织 混 合式 应 用 ; 

O 通过 把 AngularJS 应 用 转化 成 混合 式 应 用 来 一 步 步 解 释 如 何在 AngularJS 和 Angular 中 共享 

组 件 (指令 ) 与 服务 。 


































































































16.5 AngularJS 应 用 
作为 准备 ， 我 们 先 重 温 一 下 该 应 用 的 AngularJS 版 本 。 
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本 章 假 设 你 已 经 具备 了 关于 AngularJS 和 ui-router" 的 知识 。 如 果 你 对 AngularJS 
感到 吃力 ， 请 先 阅读 《AngularJS 权 成 教程 》”。 

我 们 不 会 深入 剖析 和 解释 每 个 AngularJS 的 概念 ， 只 会 回顾 一 下 这 个 准备 升级 到 
Angular/ 混 合式 应 用 的 结构 。 


要 运行 AngularJS 应 用 ， 使 用 cdq 转 到 示例 代码 中 的 conversion/AngularJS ， 安 装 依赖 ， 并 运 
行 该 应 用 : 


cd code/conversion/AngularJS # change directories 
npm install i install dependencies 
npm run go # run the app 


如 果 没 有 自动 打开 浏览 器 ， 请 手动 打开 URL: http//localhost:8080., 


在 该 应 用 中 , 你 可 以 看 到 用 户 正 在 收集 的 小 玩偶 。 我们 可 以 把 鼠标 移 到 某 个 条 目 上 , 并 点 击 
红心 图 标 来 收藏 一 个 图 钉 ， 如 图 16-3 所 示 。 





Monkey Puppet - My wife's handmade. for 
daughter. 





P 3 MIKI Yoshihito ("+w") 


图 16-3 ”红心 表示 已 收藏 的 图 钉 
我 们 还 可 以 导航 到 /add 页 ， 并 添加 一 个 新 的 图 钉 。 试 试 提交 这 个 默认 表单 。 








处 理 图 片上 传 对 于 这 个 演示 来 说 过 于 复杂 了 。 目 前 ， 如 果 你 想 换 一 幅 图 ， 只 要 
粘贴 一 幅 图 片 的 完整 URL 即 可 。 








(D https://github.com/angular-ui/ui-router 
(2) http://ng-book.com 
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16.5.1 AngularJS 应 用 的 HTML 
AngularJS 应 用 中 的 index.html 使 用 了 一 种 常用 的 结构 。 








code/conversion/AngularJS/index.html 


<!DOCTYPE html» 
«html ng-app-'interestApp'» 
«head» 
«meta charset-"utf-8"» 
«title»Interest«/title» 
«link rel="stylesheet" href-"css/bootstrap.min.css"» 
«link rel="stylesheet" href-"css/sf.css"» 
«link rel="stylesheet" href-"css/interest.css"» 
«/head» 
«body classz"container-fullwidth"» 


«div class-"page-header"» 
«div classz"container"» 
«hi»Interest «small»what you're interested in«/small»«/h1» 


«div class-"navLinks"» 
«a ui-sref-'home' id-"navLinkHome"»Home«/a» 
«a ui-sref-'add' id-"navLinkAdd"»Add«/a» 
«/div» 
«/div» 
«/div» 


«div idz"content"» 
«div ui-view-z' »«/div» 
«/div» 


«script srcz"js/vendor/lodash.js"»«/script» 
«script srcz"js/vendor/angular.js"»«/script» 
«script src-z"js/vendor/angular-ui-router. js"» «/script» 
«script srcz"js/app.js"»«/script» 
«/body» 
«/html» 














Q 注意 ,我们 在 html 标签 中 使 用 ng-app 来 指定 该 应 用 所 用 的 是 interestApp 模 块 。 
口 我 们 在 body 的 底部 使 用 script 标 签 来 加 载 JavaScript 脚 本 。 

口 该 模板 包含 一 个 page-header 指 令 ， 这 里 是 我 们 的 导航 栏 。 

Q 我 们 使 用 了 ui-router ， 这 意味 着 : 

u 使 用 ui-sret 来 表示 链接 (Home 和 Add ); 

mu 我 们 希望 路 由 器 把 内 容 放 在 ui-view 中 。 









































16.5.2 ”代码 概览 
我 们 将 遍历 代码 中 的 每 个 部 分 。 不 过 首先 来 简单 描述 一 下 这 些 活动 部 件 。 
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在 我 们 的 应 用 中 ， 有 两 个 路 由 : 


a /使 用 HomeController; 
口 /add 使 用 AddController。 


我 们 用 一 个 PinsService 来 存放 所 有 现 有 
AddController 把 新 的 元 素 添加 到 列表 中 。 








图 钉 的 数组 HomeController 演 染 出 图 钉 列表 , 而 


我 们 的 根 路 由 使 用 HomeContro1l ler 来 泻 染 这 些 图 钉 ， 而 我 们 用 pin 指 令 来 泻 染 单个 图 钉 。 
PinsService 用 于 存放 应 用 中 的 数据 ， 所 以 先 来 看 看 它 。 


16.5.3 AngularJS: PinsService 


code/conversion/AngularJS/js/app.js 


angular.module('interestApp', ['ui.router']) 


.service('PinsService', function($http, $q) { 
this._pins = null; 


this.pins = function() { 
var self = this; 
if(self._pins == null) { 
// initialize with sample data 
return $http.get("/js/data/sample-data. json").then( 
function(response) { 
self._pins = response.data; 
return self._pins; 
}) 
} else { 
return $q.when(self._pins); 
j 
j 


this.addPin = function(newPin) { 
// adding would normally be an API request so lets mock async 
return $q.when( 

this. pins.unshift(newPin) 

); 
j 

I» 














PinsService 是 一 个 .service， 它 把 这 些 图 钉 的 数组 保存 在 属性 _.pins 中 。 


.pins 方 法 返回 一 个 承诺 ， 它 会 被 解析 (resolve) 成 一 个 图 钉 列 表 。 如 果 _.pins 为 null (也 
就 是 首次 访问 时 )， 我 们 就 会 从 /js/data/sample-data.json 中 加 载 示例 数据 。 











code/conversion/AngularJS/js/data/sample-data.json 
[ 


l C 
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"title": "sock puppets", 
"description": "from: \nThe FunCraft Book of Puppets WM19'76NnISBN: 0-590-11936N 


zo. 

"user name": "tofutti break", 
"avatar src": "images/avatars/428263030N00. jpg", 
"src": "images/pins/106033588 1678811702 o.jpg", 
"url": "https://www.flickr.com/photos/tofuttibreak/106033588/", 
"faved": false, 
"id": "106033588" 

j 

( 
"title": "Puppet play.", 
"description": "My wife's handmade." 
"user name": "MIKI Yoshihito (^w)", 
"avatar src": "images/avatars/'T940'1580NC" . jpg", 
"src": "images/pins/44225'75066. Td5c4c44e'f o. jpg", 
"url": "https://www.flickr.com/photos/mujitra/44225'75066/", 
"faved": false, 
"id": "4422575066" 

}, 

{ 
"title": "easy to make puppets - oliver owl (detail)", 
"description": "from easy to make puppets by joyce luckin (1975)", 
"user name": "gilliflower", 
"avatar src": "images/avatars/262659860N00. jpg", 
"src": "images/pins/6819859064. 25d05ef2e1 o. jpg", 
"url": "https://www.flickr.com/photos/gilliflower/6819859061/", 
"faved": false, 
"id": "6819859061" 

jh 


.addPin 方 法 把 一 个 新 图 钉 加 入 到 图 钉 数 组 中 。 在 这 里 ,我们 使 用 $q.when 来 返回 一 个 承诺 ， 
就 像 我 们 真 的 向 一 台 服务 器 发 起 异步 调用 时 一 样 。 





16.5.4 AngularJS: 配置 路 由 
我 们 准备 用 ui-router 来 配置 这 些 路 由 。 


























如 果 你 还 不 熟悉 ui-router ， 请 到 https://github.com/angular-ui/ui-router/wiki 阅 读 
文档 。 











正如 前 面 所 说 ， 我 们 有 两 个 路 由 。 


code/conversion/AngularJS/js/app.js 











.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('home', { 
templateUrl: '/templates/home.html', 
controller: 'HomeController as ctrl', 
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url ffs 
resolve: { 
'pins': function(PinsService) { 
return PinsService.pins(); 
j 
j 


I» 
.state('add', { 
templateUrl: '/templates/add.html', 
controller: 'AddController as ctrl', 
url: '/add', 
resolve: ( 
'pins': function(PinsService) { 
return PinsService.pins(); 
j 
! 
}) 


$urlRouterProvider.when('', '/') ; 


D) 


第 一 个 路 由 /被 映射 到 了 HomeController ， 我 们 很 快 就 会 看 到 它 的 模板 。 注 意 ， 我 们 还 在 使 
JH ui-router 的 resolve 功能。 这 表示 在 为 用 户 加 载 此 路 由 之 前 ,我们 希望 先 调用 
PinsService.pins()， 并 且 把 结果 (图钉 列表 ) 注入 到 控制 器 中 (HomeController )。 


/add 路 由 与 之 类 似 ， 只 是 使 用 了 另 一 套 模板 和 控制 器 。 
我 们 首先 看 看 HomeController。 
































16.5.5 AngularJS: HomeController 


HomeController 很 简明 。 我 们 把 通过 resolve 注 和 进来 的 pins 保 存 到 $scope.pins 中 。 


code/conversion/AngularJS/js/app.js 


.controller('HomeController', function(pins) { 
this.pins - pins; 


D) 


16.5.6 AngularJS: HomeController 模板 


首页 的 模板 很 小 : 我 们 用 ng-repeat 来 循环 $scope .pins 中 的 图 钉 , 然后 用 pin 指 令 来 泻 染 出 
每 个 图 钉 。 





code/conversion/AngularJS/templates/home.html 


«div classz"container"» 
«div class="row"> 
«pin item-z"pin" ng-repeat-"pin in ctrl.pins"» 
«/pin» 
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«/div» 
«/div» 


下 面 深 入 看 看 这 个 pin 指 令 。 


16.5.7 AngularJS: pin 指令 








pin 指 令 被 限制 (restrict) 为 匹配 元 素 (E )， 并 有 日 具有 一 个 template。 
我 们 可 以 通过 item 属 性 把 pin 传 进去 ， 就 像 在 home.html 模 板 中 所 做 的 那样 。 
link 函 数 在 定义 域 上 定义 了 一 个 名 叫 toggleFav 的 函数 ， 它 会 来 回 切换 图 钉 的 faved 属 性 。 























code/conversion/AngularJS/js/app.js 
}) 
.directive('pin', function() { 
return { 
restrict: 'E', 
templateUrl: '/templates/pin.html', 
scope: { 
'pin': "=item" 
}, 
link: function(scope, elem, attrs) { 
scope.toggleFav = function() { 
scope.pin.faved = !scope.pin.faved; 


Q 到 2016 年 ， 该 指令 已 经 不 能 再 作为 指令 最 佳 实践 的 示例 了 。 比 如 ， 要 想 在 
AngularJS 中 写 一 个 全 新 的 指令 ， 我 应 该 会 用 AngularJS.5$ 中 新 的 .component 函 
数 。 至 少 ， 我 会 用 controllerAs 来 代替 link。 
但 本 节 并 不 是 讲解 该 如 何 写 好 AngularJS 代 码 的 ， 而 是 展示 如 何 迁 移 现 有 的 
AngularJS 代 码 。 


16.5.8 AngularJS: pin 指令 模板 
templates/pin.html 模 板 在 我 们 的 页 面 中 泻 染 了 一 个 单独 的 图 钉 。 


code/conversion/AngularJS/templates/pin.html 


«div class-"col-sm-6 col-md-4"» 
«div class-z"thumbnail"» 
«div classz"content"» 
«img ng-src-"[Ípin.src]]" class-"img-responsive"» 
«div class-"caption"» 
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«h3» ((pin.title])«/h3» 
«p»((pin.description | truncate:100]])«/p» 
</div> 
«div class="attribution"> 
<img ng-src="{{pin.avatar_src}}" class="img-circle"> 
<h4>{{pin.user_name}}</h4> 
</div> 
</div> 
<div class="overlay"> 
<div class="controls"> 
<div class="heart"> 
<a ng-click="toggleFav()"> 
<img src="/images/icons/Heart-Empty.png" ng-if="!pin.faved"></img> 
<img src="/images/icons/Heart-Red.png" ng-if="pin.faved"></img> 
</a> 
</div> 
</div> 
</div> 
</div> 
</div> 


我 们 在 这 里 用 到 的 指令 都 是 AngularJS 的 内 置 指令 : 
口 用 ng-src 来 泻 染 img; 

口 接着 显示 pin.title 和 pin.description; 

口 用 ng-if 来 决定 是 显示 红心 还 是 空心 。 


这 里 最 有 意思 的 是 ng-click, 它 会 调用 toggleFav， 而 toggleFav 会 修改 pin. faved 属 性 , 应 
用 从 而 据 此 显示 红心 或 空心 ( 如 图 16-4 所 示 )。 


























Q 


图 16-4 ”红心 与 空心 


接 下 来 ， 我 们 看 看 AddController。 





16.5.9 AngularJS: AddController 


这 个 AddController 比 HomeController 的 代码 要 多 一 点 ,我 们 从 定义 控制 器 并 指定 要 注入 的 
服务 开始 。 


code/conversion/AngularJS/js/app.js 





.controller('AddController', function($state, PinsService, $timeout) { 
var ctrl - this; 
ctrl.saving - false; 
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我 们 在 路 由 器 和 模板 中 使 用 了 controllerAs 语 法 。 这 意味 着 我 们 把 属性 放 在 了 this 上 ， 而 
不 是 $scope 上 。this 的 作用 域 在 ES5 JavaScript 上 有 点 复杂 ， 所 以 我 们 指定 var ctrl = this;, 
以 消除 在 艇 套 的 函数 中 引用 该 控制 器 时 可 能 出 现 的 歧义 。 


code/conversion/AngularJS/js/app.js 





var makeNewPin = function() { 
return { 
"title": "Steampunk Cat", 
"description": "A cat wearing goggles", 
"user name": "me", 
"avatar src": "images/avatars/me. jpg", 
"src": "/images/pins/cat. jpg", 
"url": "http://cats.com", 
"faved": false, 
"id": Math.floor(Math.random() * 10000).toString() 
j 
j 


ctrl.newPin - makeNewPin(); 

我 们 创建 了 一 个 makeNewPin 函 数 ， 它 包含 了 图 钉 的 默认 构造 函数 和 数据 。 

我 们 还 通过 把 ctr1 .newPin 属 性 设置 为 该 函数 的 调用 结果 初始 化 了 该 控制 器 。 
， 我 们 要 定义 一 个 函数 来 提交 新 图 钉 。 

code/conversion/AngularJS/js/app.js 



































ctrl.submitPin = function() { 
ctrl.saving - true; 
$timeout(function() ( 
PinsService.addPin(ctrl.newPin).then(function() [f 
ctrl.newPin - makeNewPin(); 
ctrl.saving - false; 
$state.go('home'); 
$35 
}, 2000); 
} 
}) 


本 质 上 ， 该 文档 调用 PinsService.addPin 创 建 了 一 个 新 的 图 钉 。 不 过 这 里 还 做 了 一 些 别 的 





lm. 
" 

ms 

d 





在 真实 的 应 用 中 , 这 类 操作 几乎 总 会 向 服务 器 发 起 一 次 调用 。 这 里 我 们 使 用 $timeout 来 模拟 
此 效果 。( 实际 上 ， 你 也 可 以 移 除 $timeout 函数 ， 程 序 仍然 能 正常 工作 。 在 这 里 调用 它 是 为 了 延 
组 程序 的 响应 速度 ， 让 我 们 有 机 会 看 见 Saving.… 提 示 。 ) 


我 们 要 给 用 户 一 些 提 示 ， 好 让 他 们 知道 我 们 正在 保存 图 钉 ， 因 此 设置 ctr1 .saving = true. 
我 们 调用 PinsService.addPin, 并 把 ctr1.newPin 传 给 它 。addPin 会 返回 一 个 承诺 , 我 们 在 
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这 个 承诺 的 回调 函数 中 : 
(1) 把 ctrl.newPin 恢 复 成 原始 值 ; 
(2) 把 ctr1.saving 设 置 为 false， 因 为 已 经 保存 好 了 图 钉 ; 
(3) 使 用 $state 服 务 把 用 户 重 定向 到 首页 去 ， 在 那里 可 以 看 到 新 的 图 钉 。 


下 面 是 AddController 的 完整 代码 。 











code/conversion/AngularJS/js/app.js 


.controller('AddController', function($state, PinsService, $timeout) { 
var ctrl - this; 
ctrl.saving - false; 


var makeNewPin = function() { 
return { 
"title": "Steampunk Cat", 
"description": "A cat wearing goggles", 
"user name": "me", 
"avatar src": "images/avatars/me. jpg", 
"src": "/images/pins/cat. jpg", 
"url": "http://cats.com", 
"faved": false, 
"id": Math.floor(Math.random() x 10000).toString() 
j 
j 


ctrl.newPin - makeNewPin(); 


ctrl.submitPin = function() { 
ctrl.saving - true; 
$timeout(function() { 
PinsService.addPin(ctrl.newPin).then(function() { 
ctrl.newPin - makeNewPin(); 
ctrl.saving - false; 
$state.go('home'); 
1); 
}, 2000); 
} 
}) 


16.5.10 AngularJS: AddController 模板 


/add 路 由 会 泻 染 add.html 模 板 。 
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© SO / [ng-book2: Interest x ee) 








e CŒ | D localhost:8080/4/add EE 





Interest what youre interested in 


Home Add 


| Title Steampunk Cat 
Description Acat wearing goggles 

| Link URL http;//cats.com 
Image URL limages/pins/catJpg 


Submit 








图 16-5 ”新 增 图 钉 的 表单 
该 模板 使 用 ng-mode1l 来 把 input 标 签 绑 定 到 控制 器 上 的 newPin 属 性 。 
这 里 值得 关注 的 是 : 
a 我 们 在 提交 按钮 上 使 用 ng-click 来 调用 ctr1 .submitPin; 
O 如 果 ctr1.saving 为 真 ， 那 么 就 要 显示 一 条 Saving… 消 息 。 



































code/conversion/AngularJS/templates/add.html 


«div class-z"container"» 
«div class="row"> 


«form class-"form-horizontal"» 


«div classz"form-group"» 
«label for="title" 
class-"col-sm-2 control-label"»Title«/label» 
«div class-"col-sm-10"» 

«input type="text" 
class-"form-control" 
id-"title" 
placeholder-"Title" 
ng-modelz"ctrl.newPin.title"» 

«/div» 
«/div» 


«div class-"form-group"» 
«label for-"description" 


class-"col-sm-2 control-label"»Description«/label» 
«div class-"col-sm-10"» 
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«input type="text" 
class-"form-control" 
id-"description" 
placeholder-z"Description" 
ng-modelz"ctrl.newPin.description"» 
«/div» 
«/div» 


«div class-"form-group"» 
«label for-"url" 
class-"col-sm-2 control-label"»Link URL«/label» 
«div class-"col-sm-10"» 

«input type="text" 
class-"form-control" 
ids"url" 
placeholderz"Link URL" 
ng-modelz"ctrl.newPin.url"» 

«/div» 
«/div» 


«div class-"form-group"» 
«label for-"url" 
class-"col-sm-2 control-label"»Image URL«/label» 
«div class-"col-sm-10"» 

«input type="text" 
class-z"form-control" 
id-"url" 
placeholder=" Image URL" 
ng-modelz"ctrl.newPin.src"» 

«/div» 
«/div» 


«div class-"form-group"» 
«div class-"col-sm-offset-2 col-sm-10"» 
«button type="submit" 
class="btn btn-default" 
ng-clickz"ctrl.submitPin()"»Submit«/button» 
«/div» 
«/div» 
«div ng-if-z"ctrl.saving"» 
Saving... 
«/div» 
«/ form» 


«/div» 
«/div» 


16.5.11 AngularJS: 总 结 
我 们 终于 有 了 要 升级 的 AngularJS 应 用 。 该 应 用 的 复杂 度 正好 能 让 我 们 演示 如 何 向 Angular 迁 移 。 Cm 
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16.6 ”构建 混合 式 应 用 


现在 ， 我 们 已 经 为 往 现 有 的 AngularJS 应 用 中 引入 一 些 Angular 的 技术 作 好 了 准备 。 
开始 在 浏览 器 中 使 用 Angular 之 前 ， 我 们 需要 对 应 用 的 结构 进行 一 些 调整 。 











Q、 你 可 以 在 code/conversion/hybrid 找 到 这 些 示例 代码 。 


16.6.1 混合 式 应 用 的 结构 

创建 混合 式 应 用 的 第 一 步 是 确保 你 同时 加 载 了 AngularJS 和 Angular 的 依赖 。 不 过 每 个 人 遇 到 
的 具体 情况 可 能 会 略 有 不 同 。 

在 这 个 例子 中 ,我们 已 经 提供 了 AngularJS 的 库 〈 在 js/vendor 中 )。 接 下 来 还 要 从 npm 中 加 载 
Angular 的 库 。 

在 你 的 项 目 中 ， 可 能 需要 同时 提供 这 两 个 库 ， 比 如 使 用 Bower 等。 不 过 对 于 Angular 来 说 ， 
用 npm 更 省 事 ， 而 且 我 们 也 建议 使 用 npm 来 安装 Angular。 

1. 用 package.json 指 定 依赖 

你 可 以 通过 npm 来 根据 文件 packagejson 安 装 依 顿 。 下 面 是 这 个 混合 式 应 用 例子 中 的 


package.json。 















































code/conversion/hybrid/package.json 
{ 


"name": "ng-hybrid-pinterest", 
"version": "0.0.1", 
"description": "toy pinterest clone in AngularJS/Angular hybrid", 
"contributors": [ 
"Nate Murray «nateOGfullstack.io»", 
"Felipe Coury «felipeGOng-book.com»" 
], 
"main": "index.js", 
"private": true, 
"scripts": { 
"clean": "rm -f ts/x.js ts/*.js.map ts/components/x.js ts/components/x.js.maN 
p ts/services/x.js ts/services.js.map", 
"tsc": "./node modules/.bin/tsc", 
"tsc:w": "./node modules/.bin/tsc -w", 
"serve": "./node modules/.bin/live-server --host-localhost --port-8080 .", 
"e2e:serve": "npm run tsc && ./node modules/.bin/live-server --host-localhosN 
t --port-8080 --no-browser .", 





(D http://bower.io/ 
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行 


"go": "concurrent \"np 

), 

"dependencies": { 
"Gangular/common": "2. 
"Gangular/compiler": " 
"OGangular/core": "2.4. 
"Gangular/forms": 
"Gangular/http": "2.4. 
"Gangular/platform-bro 
"Geangular/platform-bro 
"Gangular/router": "3. 
"QGangu 
"Otypes/jasmine": 
"core-js": "2.4.4", 
"es6-shim": "0.35.0" 





"reflect-metadata": "0. 


"rxjs": 
"systemjs": 
"ts-helpers": 
"tslint": 
"typings": 
"zone.js": 
sy 
"devDependencies": { 
"Qtypes/jasmine": 
"Otypes/node" : 
"concurrently": 


"5.0.2", 
"0.19.6" 
"4.4.4", 


"0.8.1", 
"0.7.4 


"karma": "0.12.22", 


"karma-chrome-launcher": 


"karma-jasmine": "0.1. 
'live-server": 
"protractor": 
"ts-node": "1. 
"typescript": 


2.4", 
"2.0.3" 





如 果 你 不 


"2.4. 


ar/upgrade": "2. 
T2954 


"2:23 
"6.0.42", 

"1.0.0", 
"jasmine-spec-reporter": 


m run tsc:wN" AN"npm run serveN" 


4" 
1s 
wser": "2.4.4", 
wser-dynamic": 
4:1"; 
0.0-rc.6", 
40", 


"2.4.4" 


L 


3.7.0-dev.2", 


30", 


"2.5.0" 


, 


"Q.1.4" 


, 


5", 


"0.9.0", 
"4.0.14", 


熟悉 其 中 的 某 个 包 ， 最 好 自己 去 发 现 它 的 用 途 。 比 如 rxjs 是 一 个 为 我 


们 提供 可 观察 对 象 的 库 ， 而 systemjs 提 供 的 是 模块 加 载 器 ， 我 们 将 在 本 章 中 用 


到 它 。 


一 旦 添加 了 Angular 的 依赖 
2. 编译 代码 


你 可 能 注意 到 了 ,package.json 中 的 "script" 


he run tsc 时 ， 它 就 会 


我 们 准备 在 这 个 例子 中 使 用 TypeScript， 


图 灵 社 区 会 


， 就 可 以 运行 hpm instal1 命 令 来 安装 它们 了 。 




















调用 TypeScript 编 译 需 来 编译 我 们 的 代码 。 








员 xiaochao12312312ff(499290328@qq.com) EF 尊重 版 权 


属性 中 包含 另 一 个 属性 "tsc" 。 这 表 


同时 AngularJS 的 代码 仍然 使 用 JavaScript。 


示 当 我 们 运 





470 第 16 章 把 AngularJS 应 用 升级 到 Angular 





要 这 么 做 ， 就 要 先 把 所 有 TypeScript 代 码 放 进 ts/ 文 件 夹 里 ， 把 所 有 JavaScript 代 码 放 进 js/ 文 件 


夹 里 。 





我 们 用 tsconfig.json 文 件 来 配置 TypeScript 编 译 僻 。 关 于 此 文件 ， 现 在 你 只 要 知道 一 点 就 可 以 























4 4 




















了 : filesGlob 属 性 指定 了 适 配 规则 " . /ts/xx*/*.ts"。 它 的 意思 是 “ 当 运 行 TypeScript 编 译 器 时 ， 


我 们 希望 编译 ts/ 目 录 下 所 有 以 .ts 结尾 的 文件 ”。 


在 该 项 














目 中 ,浏览 器 只 会 加 载 JavaScript。 因 此 我 们 要 使 用 TypeScript 编 译 器 (tse ) 来 把 这 些 




















代码 编译 成 JavaScript， 然 后 再 把 AngularJS 和 Angular 的 JavaScript 代 码 加 载 进 浏 览 器 中 。 
3. 加 载 index.html 依 赖 


现在 ， 我 们 已 经 设置 好 了 依赖 和 编译 器 ， 接 着 就 要 把 这 些 JavaScript 文 件 加 载 到 浏览 需 中 了 。 
因此 ， 我 们 添加 script 标 签 。 




















code/conversion/AngularJS/hybrid/index.html 


«div 


id-z"content"» 


«div ui-view-z' »«/div» 
«/div» 


«1-- 

«scri 
«scri 
«scri 
«scri 


«scri 
«scri 


Libraries --» 

pt src-"node modules/core-js/client/shim.min.js"»«/script» 
pt src-"node modules/zone. js/dist/zone.js"»«/script» 

pt src-"node modules/reflect-metadata/Reflect.js"»«/script» 
pt src-"node modules/systemjs/dist/system.src.js"»«/script» 


pt srcz"js/vendor/angular.js"»«/script» 
pt srcz"js/vendor/angular-ui-router. js"»«/script» 





我 们 从 node_ modules/ 中 加 载 的 文件 是 Angular 及 其 依赖 ， 而 从 js/vendorv 中 加 载 的 文件 则 是 
AngularJS 及 其 依赖 。 








但 是 你 可 能 已 经 注意 到 了 ,我 们 还 没有 在 HTML 标签 中 加 载 任何 自己 的 代码 。 要 加 载 这些 代 
码 ， 就 要 使 用 System.js。 


4. 配置 System.js 
在 这 个 例子 中 ， 我 们 准备 把 System.js 用 作 模 块 加 载 器 。 





e 














我 们 还 可 以 使 用 webpack (就 像 在 本 书 其 他 例子 中 所 用 的 那样 ) 或 很 多 其 他 的 加 
AR (比如 requirejs 等 )。 不 过 ，System.js 是 一 个 很 不 错 并 且 具 有 可 伸缩 性 的 加 
载 器 ， 常 常 和 Angular 一 起 使 用 。 本 章 会 提供 一 个 漂亮 的 示例 ， 向 你 展示 如 何 通 
过 System.js 使 用 Angular。 


要 配置 System.js， 需 要 在 index.html 的 cscript> 标 签 中 进行 如 下 修改 


图 灵 社 区 会 员 xiaochao12312312ff(499290328@qq.com) 专 享 尊重 版 权 


16.6 ”构建 混合 式 应 用 471 





«script src-"resources/systemjs.config.js"»«/script» 
System.import('ts/app.js') 
.then(null, console.error.bind(console)); 


System. import('ts/app.js') 说 明 该 应 用 的 入 口 点 是 ts/app.js 文 件 。 当 我 们 写 混合 式 Angular 
应 用 时 ，Angular 的 代码 会 成 为 入 口 点 。 这 很 容易 理解 ， 因 为 Angular 提 供 了 对 AngularJS 的 向 后 兼 
容 能 力 。 我 们 很 快 就 会 看 到 如 何 引 导 该 应 用 。 

这 里 要 注意 的 另 一 个 问题 是 , 我 们 正在 ts/ 目 录 下 加 载 .js 文件 。 为 什么 呢 ? 这 是 因为 TypeScript 
译 器 会 在 页 面 加 载 时 把 这 些 文件 编译 成 JavaScript。 

我 们 已 经 在 resources/systemjs.config.js 中 配置 好 了 System.js。 此 文件 中 包含 了 几乎 标准 化 的 配 

置 方式 ， 但 现在 我 们 要 把 AngularJS 应 用 加 载 到 Angular 代 码 中 ， 那 就 不 得 不 添加 一 个 特殊 的 属性 
interestAppNg1 了 ， 它 指向 我 们 的 AngularJS 应 用 。 该 选项 让 我 们 能 在 TypeScript 代 码 中 这 样 用 : 


import 'interestAppNgi'; // "bare import" for side-effects 
当 模 块 加 载 右 看 到 字符 串 ' interestAppNg1 ' 时 ， 就 会 去 Jis/app.js 中 加 载 我 们 的 AngularJS 应 用 。 


packages 属 性 指出 ts 包 ( package ) 中 的 文件 将 会 具有 .js 扩展 名 ， 并 使 用 System.js 来 注册 
(register ) 这 种 模块 格式 。 












































En 
































Qe TypeSeript 编 译 器 可 以 输出 多 种 模块 格式 。System js format 需要 与 编译 器 输出 
的 模块 格式 保持 一 致 。 这 里 register 的 模块 格式 之 所 以 能 直接 使 用 ， 是 因为 我 
们 在 tsconfig.json 中 把 compilerOptions.module 指 定 成 了 "system" 格 式 。 


A 要 配置 好 System.js 是 很 难 的 ， 有 大 量 潜在 选项 。 
这 不 是 一 本 关于 模块 加 载 器 的 书 ， 事 实 上 ， 只 是 深入 讲解 如 何 配 置 System.js 和 
其 他 JavaScript 模 块 加 载 器 就 足够 写 一 整 本 书 了 。 
目前 ， 我 们 不 准备 深入 讨论 模块 加 载 器 ， 不 过 如 果 你 想 了 解 更 多 ， 请 参阅 
https:/github.comy/systemjs/systemjs/blob/masterdocs/config-aplimd。 


O 你 想 阅读 关于 JavaScript 模 块 加 载 器 的 书 吗 ? 我 们 正在 考虑 写 一 本 。 如 果 你 想 及 
时 收 到 通知 ， 请 在 这 里 留 下 你 的 邮箱 : http://eepurl.com/bMOaEX。 


16.6.2 引导 混合 式 应 用 
现在 项 目 结构 已 经 就 绪 ， 我 们 来 启动 这 个 应 用 吧 。 
还 记得 吗 ?” 在 AngularJS 中 ， 有 两 种 方式 可 以 启动 应 用 : 


(]) 使 用 ng-app 指 令 ， 比 如 在 HTML 中 写 ng-app='interestApp ' ; 
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(2) 在 JavaScript 中 使 用 angular .bootstrap。 

在 混合 式 应 用 中 ， e N 

我 们 还 要 改 为 从 代码 中 启动 应 用 ， 因 此 请 确保 从 index.html 中 移 除 了 ng-app 指 令 。 
一 个 最 简 的 启动 代码 是 这 样 的 : 


// code/conversion/hybrid/ts/app.ts 

import { 

NgModule, 

forwardRef 

) from 'Gangular/core'; 

import { CommonModule } from 'éangular/common'; 

import { BrowserModule } from 'Gangular/platform-browser'; 


import ( UpgradeAdapter } from 'Gangular/upgrade'; 
declare var angular: any; 
import 'interestAppNgi'; // "bare import" for side-effects 





/* 
* Create our upgradeAdapter 
*/ 
const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter( 
forwardRef(() => MyAppModule)); // «-- notice forward reference 


LJ 3: 
// upgrade and downgrade components in here 


Lf eg 


/* 
* Create our app's entry NgModule 
*/ 
GNgModule(Í( 
declarations: [ MyNg2Component, ... ], 
imports: [ 
CommonModule, 
BrowserModule 
], 
providers: [ MyNg2Services, ... ] 


}) 
class MyAppModule { } 


/* 
* Bootstrap the App 
*/ 
upgradeAdapter.bootstrap(document.body, ['interestApp']); 


我 们 先导 入 了 UpgradeAdapter ， 然 后 创建 它 的 实例 upgradeAdapter o 


不 过 ，UpgradeAdapter 的 构造 函数 需要 一 个 NgModule ， 它 用 于 启动 我 们 的 Angular 应 用 ， 但 
我 们 还 没有 定义 它 呢 ! 要 解决 这 个 问题 , 就 用 forwardRef 哨 数 来 取得 NgModule 的 “前 向 引用 ”( 后 
面 会 声明 它 ) 
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当 我 们 定义 自己 的 NgModule 也 就 是 MyAppModule 时 (具体 到 这 个 应 用 中 ， 它 应 该 是 
InterestAppModule )， 写 法 和 定义 其 他 Angular 的 NgModule 没 有 区 别 : 我 们 放 进 了 声明 
(declarations )、 导 入 (imports ) 和 提供 者 (providers ) 等 。 


最 后 ， 我 们 告诉 upgradeAdapter 在 document .bodqy 元 素 上 bootstrap 此 应 用 ， 并 指定 了 
AngularJS 应 用 的 模块 名 。 


这 将 会 在 启动 Angular 应 用 的 同时 启动 AngularJS 应 用 ! 接 下 来 ， 我 们 就 开始 一 点 一 点 地 用 
Angular fi o 


16.6.3 ”我 们 要 升级 什么 
先 来 讨论 一 下 这 个 例子 中 的 哪些 部 分 需要 迁移 到 Angular， 哪 些 仍 然 留 在 AngularJS 。 
1. 首页 


需要 注意 的 第 一 点 是 ， 我 们 仍 将 使 用 AngularJS 来 管理 路 由 。 当 然 ，Angular 有 自己 的 路 由 ， 
你 可 以 在 第 7 章 中 读 到 它 。 但 是 如 果 你 正在 构建 一 个 混合 式 应 用 ， 很 可 能 已 经 用 AngularJS 配 置 过 
很 多 路 由 了 。 因 此 ， 在 这 个 例子 中 ， 我 们 仍然 沿用 ui-router 作 为 路 由 体系 。 


在 首页 中 , 我 们 准备 把 Angular 的 组 件 伦 套 在 AngularJS 的 指令 中 。 在 这 个 例子 中 , 就 是 把 “图 
钉 控件 ”转变 成 Angular 的 组 件 ( 如 图 16-6 所 示 也 就 是 说 ， 我 们 的 pin 指 令 将 调用 Angular 的 
pin-controls 组 件 ， 而 pin-controls 组 件 负责 泻 染 出 用 来 表示 收藏 的 心 型 图 标 。 





























Pr | (Gul Pesa [oem | 
sock puppets from: The FunCraft Book of Puppet play. My wife's handmade. easy to make puppets - oliver owl (detail) from 
Puppets 1976 ISBN: 0-590-11936-2 easy to make puppets by joyce luckin (1975) 


DD tofutti break & MIKI Yoshihito fo) 号 gillitlower 











16-6 ”首页 的 AngularJS 和 Angular 组 件 
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尽管 这 是 一 个 很 小 的 例子 , 但 它 展 示 了 一 种 强 有 力 的 想法 : 如 何在 ng 的 不 同 版 本 之 间 无 颖 地 


2. About 页 


我 们 也 会 在 About 页 上 使 用 AngularJS 来 实现 路 由 和 页 眉 。 不 过 ， 在 About 页 上 ， 我 们 将 把 整 
个 表单 蔡 换 成 Angular 的 组 件 : AddPinComponent (如 图 16-7 所 示 )。 








Image URL limages/pins/catjpg 


Submit 








Tocaihost80807add 


图 16-7 About 页 的 AngularJS 和 Angular 组 件 
回想 一 下 ， 该 表单 会 往 PinsService 上 添加 一 个 新 的 图 钉 。 在 这 个 例子 中 ， 我 们 需要 通过 某 
种 方式 来 让 Angular 的 AddPinComponent 访 问 到 AngularJS 的 PinsService。 


另外 , 在 添加 新 的 图 钉 之 后 ， 该 应 用 应 该 自动 导航 到 首页 。 不 过 ， 要 想 改 变 当 前 路 由 ,我 们 
需要 在 Angular 的 AddPinComponent 中 使 用 来 自 AngularJS 中 ui-router 库 的 $state 服 务 。 因 此 , 我 
们 同样 需要 确保 $state 服 务 也 能 在 AddPinCcomponent 中 使 用 。 


3. 服务 
我 们 刚才 说 过 ， 有 两 个 AngularJS 的 服务 将 会 升级 到 Angular: 


口 PinsService 
口 $state 


不 过 我 们 也 想 看 看 如 何 把 一 个 Angular 服 务 降级 ， 以 供 AngularJS 使 用 。 为 此 ， 我 们 稍 后 会 用 
TypeScripVAngular 来 创建 一 个 AnalyticsService 服 务 ， 并 把 它 共 享 给 AngularJS 。 


4. 盘点 
概括 起 来 ， 我 们 准备 讲解 下 列 内 容 : 
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O 把 Angular 的 PinControlsComponent 降 级 到 AngularJS( 用 来 实现 收藏 按钮 ); 
O 把 Angular 的 AddPinComponent 降 级 到 AngularJS( 用 来 实现 新 增 图 钉 页 面 ); 
O 把 Angular 的 AnalyticsService 降 级 到 AngularJS ( 用 来 进行 事件 记录 ); 

O 把 AngularJS 的 PinsService 升 级 到 Angular ( 用 来 新 增 图 钉 ); 

O 把 AngularJS 的 $state 服 务 升级 到 Angular ( 用 来 控制 路 由 )。 























16.6.4 ” 插 一 小 段 内 容 : 类 型 文件 

TypeScript 最 美妙 的 一 点 就 是 编译 时 类 型 检查 。 不 过 ， 如 果 你 正在 构建 一 个 混合 式 应 用 ， 那 
么 估计 你 打算 集成 到 项 目 中 的 JavaScript 代 码 大 部 分 是 无 类 型 的 。 

当 你 试图 在 TypeScript 中 使 用 JavaScript 代 码 时 ， 可 能 会 收 到 编译 器 错误 ， 因 为 编译 器 不 知道 
你 的 JavaScript 对 象 结构 如 何 。 你 可 以 尝试 把 它们 全 部 转换 成 cany> ， 但 这 样 不 但 看 起 很 来 丑 而 且 
容易 出 错 。 

更 好 的 方案 是 给 TypeScript 编 译 器 提供 自 定 义 类 型 注解 。 然 后 ， 编 译 右 就 能 用 这 些 类 型 
来 强化 你 的 JavaScript 代 码 了 。 

比如 ， 还 记得 我 们 是 怎样 在 AngularJS 版 本 的 makeNewPin 中 创建 图 钉 对 象 的 吗 ? 


















































code/conversion/AngularJS/js/app.js 
var makeNewPin = function() { 
return { 
"title": "Steampunk Cat", 
"description": "A cat wearing goggles", 
"user name": "me", 
"avatar src": "images/avatars/me. jpg", 
"src": "/images/pins/cat. jpg", 
"url": "http://cats.com", 
"faved": false, 
"jid": Math.floor(Math.random() * 10000).toString() 
j 
j 


ctrl.newPin - makeNewPin(); 
如 果 能 把 这 些 对 象 的 结构 告诉 编译 器 该 多 好 ! 那样 就 不 用 到 处 求助 于 any 了 。 


此 外 ,我 们 准备 在 AngularTypeScript 中 使 用 ui-router 中 的 $state 服 务 ， 同 样 要 把 这 个 服务 
中 有 哪些 可 用 的 函数 告诉 编译 器 。 

因此 ， 虽 然 为 TypeScript 提 供 自 定义 类 型 信息 是 TypeScript 的 分 内 之 事 ( 与 Angular 无 关 )， 但 
我 们 还 是 得 亲 力 亲 为 。 现 在 之 所 以 还 缺少 这 么 多 类 型 定义 文件 , 是 因为 TypeScript 才 发 布 没 多 久 ， 
仍然 相对 较 新 。 

在 本 节 中 ， 我 会 告诉 你 如 何 为 TypeScript 制 作 自 定义 类 型 文件 ( custom typing )。 
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如 果 你 已 经 很 熟悉 如 何 创建 和 使 用 TypeScript 的 类 型 定义 文件 , 请 放心 大 胆 地 跳 
过 本 节 。 
1. 类 型 文件 
在 TypeScript 中 , 可 以 通过 书写 类 型 定义 文件 (typing definition file ) 来 描述 我 们 的 代码 结构 。 
类 型 定义 文件 通常 以 扩展 名 .d.ts 结 尾 。 


当 我 们 写 TypeScript 代 码 时 ， 通 常 不 用 写 .dts 文 件 ， 因 为 TypeScript 文 件 本 身 已 经 包含 了 类 型 
信息 。 只 有 当 要 为 某 些 外 来 的 JavaScript 代 码 添加 类 型 信息 时 ， 才 需要 写 .d.ts 文 件 。 


例如 ， 为 了 描述 我 们 的 图 钉 对 象 ， 可 以 为 它 写 一 个 interface。 

















code/conversion/hybrid/js/app.d.ts 


export interface Pin { 
title: string; 
description: string; 
user name: string; 
avatar src: string; 
src: string; 
url: string; 
faved: boolean; 
id: string; 


} 
注意 ， 我 们 不 是 在 声明 一 个 类 ， 也 没有 创建 实例 ， 而 是 定义 了 接口 的 形态 ( 类 型 )。 


要 使 用 .d.ts 文 件 ， 需 要 告诉 TypeScript 它 们 在 哪里 。 最 简单 的 方式 就 是 修改 tsconfig.json 文 件 。 
比如 ,假设 有 一 个 名 为 js/app.d.ts 的 文件 ， 我 们 就 可 以 像 这 样 添加 它 : 


// tsconfig.json 
"compilerOptions": { ... }, 
"files": [ 
"ts/app.ts", 
"js/app.d.ts" 
l, 


// more.. 


仔细 看 这 里 的 文件 路 径 。 我 们 要 从 ts/app.ts 中 加 载 TypeScript， 从 js/ 目 录 下 加 载 app.d.ts 文 件 。 
这 是 因为 js/app.d.ts 文 件 是 为 js/app.js( 这 是 AngularJS 的 JavaScript 文 件 , 而 不 是 Angular 的 TypeScript 
文件 ) 准备 的 类 型 文件 。 















































我 们 这 就 一 点 点 把 app.d.ts 写 出 来 。 首 先 来 看 一 个 现 有 工具 typings ， 以 帮助 我 们 使 用 第 三 方 
TypeScript 定 义 文 件 。 


2. 使 用 typings 管 理 第 三 方 库 
typings 是 一 个 用 来 为 第 三 方 库 管理 TypeScript 类 型 定义 文件 的 工具 。 
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我 们 准备 使 用 angular-ui-router ， 所 以 要 用 typings 来 安装 angular-ui-router 的 类 型 信 
息 。 下 面 是 操作 步骤 。 


先 安装 好 typings ， 可 以 用 命令 npm install -g typings 来 安装 。 





接 下 来 ， 


配置 一 个 typingsjson 文 件 ， 可 以 用 命令 typings init 来 创建 (或 者 使 用 现成 的 )。 














然后 ， 我 们 通过 命令 typings install angular-ui-router --save 来 安装 所 需 的 包 。 














注意 ，typings 命 令 创建 了 一 个 typings 目 录 ， 其 中 包含 文件 browserd.ts。 这 个 browser.d.fs 文 
件 是 所 有 被 typings 管 理 的 类 型 定义 文件 的 总 人 口 点 。 也 就 是 说 ， 如 果 你 写 了 自己 的 类 型 定义 文 
件 ， 那 么 它们 不 会 被 包含 在 这 里 ， 但 通过 typings 工 具 安装 的 类 型 定义 都 会 被 加 载 到 此 文件 的 
reference 标 签 下 。 





A 




















不 要 直接 修改 typings/browser.d.ts 文 件 ! typings 会 蔡 你 管理 这 个 文件 。 如 果 你 
修 履 了 它 ， 那 么 这 些 修改 就 会 被 覆盖 。 





现在 , 我 们 有 了 类 型 定义 文件 typings/browser.d.ts, 该 如 何 使 用 它 呢 ? 我 们 得 先 把 它 告 诉 编译 


mA. n] 














以 通过 tsconfig.json 来 做 到 这 一 点 : 


// tsconfig.json 
"compilerOptions": { ... }, 
"files": [ 





], 


"typings/browser.d.ts", 
"ts/app.ts", 
"js/app.d.ts" 


// more... 


EXE, dXÍ[iHEtypings/browser.d.ts XAFRA] T filesZXZHrp, xc RAR YER ETE TE 
时 包含 typings 下 的 类 型 信息 。 
































假如 我 们 要 加 载 另 一 个 库 ( 比如 underscore ), 而 且 同 样 希 望 用 System.js 加 载 它 ， 

该 怎么 办 呢 ? 

整体 思路 是 ， 你 要 : (1) 让 类 型 信息 在 编译 时 可 用 ; (2) 让 代码 在 运行 时 可 用 。 

具体 办 法 如 下 。 

(1) typings install underscore: 安装 类 型 信息 文件 。 

(2) npm install underscore: 在 node modules 中 安装 JavaScript 文 件 。 

(3) 在 index.html 中 调用 System.config 的 地 方 往 paths 下 增加 一 名 underscore: 

' . /node. modules/underscore/underscore.js', 

(4) 然后 在 TypeScript 中 通过 import x as _ from 'underscore'; FA T X] X. 

(5) 最 后 使 用 下 划 线 ， 就 像 这 样 : let foo = _.map( [1,2,3], (x) => x + 1);« 16 
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我 们 已 经 在 这 个 应 用 中 做 完了 typings instal1， 所 以 你 不 必 自 己 安 装 这 些 依 
束 了 。 

实际 上 ， 如 果 你 运行 typings _ install ， 将 会 收 到 一 个 错误 : 

node. modules/angular2/typings/angular-protractor/angular-protractor.d.ts(1679,13N 


): error TS2403: Subsequent variable declarations must have the same type. Vari\ 
able '$' must be of type 'JQueryStatic', but here has type 'cssSelectorHelper'. 


iX 4 bug a ele 图 把 一 个 类 型 赋 给 $ 交 量 。 在 
本 书 出 版 时 ， 临 时 性 的 解决 方案 是 打开 typings/jquery/jquery.d.ts 文 件 ， 并 注释 掉 
这 一 行 ; 

// declare var $: JQueryStatic; // - ng-book told me to comment this 

当然 ， 如 果 你 7 m 来 访问 jQuery 特有 的 类 型 信息 ， 就 会 出 错 
(不 过 本 例 中 不 存在 这 种 情况 )。 


3. 自 定义 类 型 文件 


An 
用 





更 月 











现成 的 第 三 方 类 型 定义 文件 固然 好 ， 不 过 还 有 一 些 场景 是 找 不 到 现 有 类 型 定义 文件 


的 ， 特 别 是 我 们 自 a 


通常 ， 当 我 们 写 自 定义 类 型 信息 文件 时 , 会 把 它 和 相应 的 JavaScript 代 码 放 在 一 起 , 因此 我 们 
来 创建 一 个 js/app.d.ts 文 件 。 











code/conversion/hybrid/js/app.d.ts 


declare module interestAppNgi { 


export interface Pin { 
title: string; 
description: string; 
user name: string; 
avatar src: string; 
src: string; 


} 


url: 


string; 


faved: boolean; 


id: 


string; 


export interface PinsService { 
pins(): Promise«Pin[]»; 
addPin(pin: Pin): Promise«any»; 


} 
} 


declare module 'interestAppNg1' { 
export = interestAppNg1; 


} 
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我 们 用 declare 关 键 字 来 制作 “周边 声明 ”( ambient declaration )， 意 思 是 我 们 定义 了 一 个 并 
非 来 自 于 TypeScript 文 件 的 变量 。 在 这 个 例子 中 ， 我 们 声明 了 两 个 接口 : 


(1)Pin 








(2) PinsService 
Pin 接 口 用 来 描述 图 钉 对 象 的 属性 名 及 其 值 类 型 。 
PinsService 接 口 则 用 来 描述 这 个 PinsService 中 两 个 方法 的 类 型 。 


口 pins() 返 回 一 个 由 Pin 数 组 构成 的 Promise ; 
口 addPin( ) 接 收 一 个 Pin 参 数 ， 并 返回 一 个 Promise。 











Q 学 习 写 类 型 定义 文件 的 更 多 知识 


如 果 要 学 习 关 于 写 .d.ts 文 件 的 更 多 知识 ， 下 列 链接 会 很 有 帮助 : 

口 “TypeScript 手册: 与 其 他 JavaScript 库 协同 工作 ”( http://www.types- 
criptlang.org/Handbook#modules-working-with-other-javascript-libraries ) 

口 “TypeScript 手 册 : 书写 类 型 定义 文件 ”( https://github.com/MicrosofyTypeScript- 
Handbook/blob/master/pages/Writing%20Definition%20Files.md ) 

口 “ 快 速 提 示 : TypeScript 的 declare 关键 字 ”( http://blogs.microsoft.co.il/ 
gilf/2013/07/22/quick-tip-typescript-declare-keyword/ ) 





你 可 能 已 经 注意 到 了 ， 我 们 并 没有 在 AngularJS 的 JavaScript 代 码 的 任何 地 方 声 明令 牌 
interestAppNg1 。 这 是 因为 interestAppNg1 只 是 我 们 用 来 在 TypeScript 代 码 中 引用 这 些 JavaScript 
代码 时 所 用 的 标识 符 ， 并 不 是 类 型 的 一 部 分 。 

我 们 已 经 完成 了 这 个 文件 ， 可 以 导入 这 些 类 型 了 ， 就 像 这 样 : 


import { Pin, PinsService } from 'interestAppNg1'; 









































16.6.5 写 Angular B PinControlsComponent 
我 们 刚刚 明白 了 类 型 信息 ， 那 就 言 归 正 传 ， 继 续 看 混合 式 应 用 吧 。 


我 们 首先 要 做 的 是 写 一 个 Angular 版 的 PinControlsComponent, 这 样 才能 把 Angular 的 组 件 般 
入 到 AngularJS 的 指令 中 。PinControlsComponent 为 收藏 的 图 钉 显 示 心 型 图 标 ， 点 击 它 就 可 以 来 
回 切换 状态 。 


先 从 导入 Pin 类 型 开始 ， 然 后 定义 男 一 些 需要 的 常量 。 


code/conversion/hybrid/ts/components/PinControlsComponent.ts 
/* 


* PinControls: a component that holds the controls for a particular pin 
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*/ 
import { 
Component, 
Input, 
Output, 
EventEmitter 
) from 'Gangular/core'; 
import { NgIf } from 'Gangular/common'; 
import { Pin } from 'interestAppNg1'; 


JE F3 5 eComponent 注解。 


code/conversion/hybrid/ts/components/PinControlsComponent.ts 


GComponent( f 
selector: 'pin-controls', 
template: ^ 
«div classz"controls"» 
«div class-"heart"'» 
«a (click)-2"toggleFav()"» 
«img src-"/images/icons/Heart-Empty.png" xngIf-z"!pin.faved" /> 
«img src-"/images/icons/Heart-Red.png" xngIf-"pin.faved" /> 
«/a» 
«/div» 
«/div» 


}) 

注意 ， 这 里 匹配 的 是 pin-controls 元 素 o 

我 们 的 模板 和 AngularJS 版 本 的 很 像 ， 只 是 把 (click) 和 *ngIf 改 成 了 用 Angular 的 模板 语法 。 
现在 的 组 件 定义 类 变 成 了 下 面 这 样 。 


code/conversion/hybrid/ts/components/PinControlsComponent.ts 


export class PinControlsComponent { 
GInput() pin: Pin; 
GOutput() faved: EventEmitter«Pin» - new EventEmitter«Pin»(); 


toggleFav(): void { 
this.faved.next(this.pin); 
j 
j 


注意 , 我 们 并 没有 在 ecomponent 注解 中 指定 inputs 和 outputs ， 而 是 直接 在 类 的 属性 上 使 用 
了 e@Input 和 @output 注 解 。 用 这 种 方式 为 属性 提供 类 型 信息 更 加 简便 。 

该 组 件 将 接收 一 个 pin 参 数 作为 输入 ， 也 就 是 我 们 管理 的 Pin 对 象 。 

该 组 件 指定 了 一 个 名 叫 faved 的 输出 参数 。 这 跟 我 们 在 AngularJS 应 用 中 的 用 法 略 有 不 同 。 如 
果 你 查看 toggleFav 的 实现 ， 会 发 现 我 们 所 做 的 是 通过 EventEmitter 把 当前 图 钉 发 给 了 外 界 。 


这 是 因为 我 们 已 经 在 AngularJS 中 实现 了 更 改 faved 状 态 的 方法 ,所 以 不 希望 在 Angular 中 重新 
实现 一 模 一 样 的 功能 (但 你 也 可 能 希望 再 次 实现 ， 这 取决 于 你 们 开发 组 内 的 约定 )。 
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16.6.6 ”使 用 Angular 的 PinControlsComponent 


有 了 Angular 的 pin-controlls 组 件 ， 我 们 就 可 以 在 模板 中 使 用 它 了 。 现 在 的 pin.html 模 板 变 
成 了 下 面 这 样 。 


code/conversion/hybrid/templates/pin.html 


«div class-z"col-sm-6 col-md-4"» 
«div classz'"thumbnail"» 
«div classz'"content"» 
«img ng-src-"[Ípin.src]]" class-"img-responsive"» 
«div class-z'caption"» 
«h3» ((pin.title]]«/h3» 
«p»[(pin.description | truncate:100]]«/p» 
«/div» 
«div class-"attribution"» 
«img ng-src-"[[pin.avatar src]]" class-"img-circle"» 
«h4» ( (pin.user. name] ] «/h4» 
«/div» 
«/div» 
«div class-"overlay"» 
«pin-controls [pin]-2"pin" 
(faved)-2"toggleFav($event)"»«/pin-controls» 
«/div» 
«/div» 
«/div» 


该 模板 是 属于 AngularJS 指 令 的 ， 因 此 我 们 可 以 在 里 面 使 用 AngularJS 的 指令 ， 比 如 ng-src。 
不 过 ， 要 注意 使 用 Angular 中 pin-controls 组 件 的 那 一 行 : 


«pin-controls [pin]="pin" 
(faved)="toggleFav($event)"></pin-controls> 


有 意思 的 是 ,我 们 在 同时 使 用 Angular 输 入 属性 的 方 括号 语法 [pin] 以 及 Angular 输 出 属性 的 圆 
括号 语法 (faved)。 

































































在 混合 式 应 用 中 ， 当 你 在 AngularJS 中 使 用 Angular 指 令 时 ， 仍 然 可 以 照常 使 用 Angular 的 语法 。 
通过 输入 属性 [pin] ， 可 以 把 来 自 AngularJS 指 令 scope 上 的 pin 属 性 传 进去 。 


在 输出 参数 (faved) 中 , 我 们 调用 了 AngularJS 指 令 scope 上 的 toggleFav 函 数 。 注意 看 这 里 的 
实现 方式 : 我 们 没有 在 Angular 指 令 中 修改 pin. faved 状 态 (虽然 我 们 也 能 这 么 做 ); 反之 ,我 们 
只 是 让 Angular 的 PinControlsComponent 在 调用 toggleFav 的 时 候 把 这 个 pin 发 给 外 界 。( 如 果 没 
看 明白 ， 请 再 回头 看 看 PinControlsComponent 的 toggleFav。) 


我 们 这 么 做 是 为 了 告诉 你 : 可 以 保持 AngularJS 中 的 现 有 功能 ( scope.toggleFav ) 不 变 ， 只 
把 组 件 迁 移 到 Angular。 在 这 个 例子 中 ，AngularJS 的 pin 指 令 监 听 了 Angular PinControls- 
Component 上 的 faved 事 件 。 
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如 果 你 刷新 这 个 页 面 , 可 能 会 注意 到 它 无 法 正常 工作 , 那 是 因为 我 们 还 缺少 一 个 很 重要 的 步 














又 : 把 PinCcontrolsComponent 降 级 到 AngularJS 。 


16.6.7 把 Angular B PinControlsComponent 降级 到 AngularJS 




















要 想 让 我 们 的 组 件 跨 越 Angular 和 AngularJS 的 界线 ， 最 后 一 步 是 使 用 upgradeAdapter 来 降级 


这 些 组 件 〈 或 者 升级 ， 我 们 稍 后 会 看 到 )。 











我 们 在 app.ts 文 件 中 执行 这 些 降级 工作 C 也 就 是 调用 upgradeAdapter bootstrap 的 地 方 Jo 


首先 ， 我 们 需要 导入 必 备 的 angular 库 。 


code/conversion/hybrid/ts/app.ts 


import { 

NgModule, 

forwardRef 

) from 'Gangular/core'; 

import { CommonModule } from 'éangular/common'; 

import { 

FormsModule, 

) from 'Gangular/forms'; 

import { BrowserModule } from "eangular/platform-browser"; 
import ( UpgradeAdapter } from 'Gangular/upgrade'; 

declare var angular: any; 

import 'interestAppNgi'; // "bare import" for side-effects 


然后 ， 我 们 用 (几乎 ) 标准 的 AngularJS 方 式 来 创建 一 个 .qirective。 











code/conversion/hybrid/ts/app.ts 


angular.module('interestApp') 
.directive('pinControls', 
upgradeAdapter.downgradeNg2Component(P inControlsComponent)) 


记 住 我 们 已 经 导入 了 ' interestAppNg1' ， 它 会 加 载 我 们 的 AngularJS 应 用 ， 而 AngularJS 应 用 
中 调用 了 angular.module('interestApp'，[])。 也 就 是 说 ， 我 们 的 AngularJS 应 用 已 经 通过 





angular 注 册 好 了 interestApp 模 块 。 








现在 , 我 们 要 通过 调用 angular .module( 'interestApp ' ) 来 找到 该 模块 , 然后 把 


其 中 ， 就 像 我 们 在 AngularJS 中 的 标准 做 法 那样 。 


o angular.module 的 获取 (getter ) FÆ (setter ) 语法 




















昌 令 添加 到 


还 记得 吗 ? 当 往 angular.module 函 数 的 第 二 个 参数 中 传 入 一 个 数组 时 ， 我 们 就 


是 在 创建 模块 。 比 如 angular.module('foo'，[] ) 将 创建 一 个 名 叫 foo 的 
我 们 非 正 式 地 将 其 称 为 设置 语法 。 


模块 。 


同样 ， 如 果 我 们 省 略 了 这 个 数组 ， 就 是 在 获取 一 个 模块 (假设 它 已 经 存在 )。 6 


如 angular.module( 'foo' ) 将 获取 foo 模 块 。 我 们 称 其 为 获取 语法 。 
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在 这 个 例子 中 ， 如 果 我 们 忘 了 这 项 限制 ， 并 且 在 appts (Angular ) 中 调用 
angular.module('interestApp', []), WA IMLA ŽILA a interestApp 
模块 。 你 的 应 用 将 无 法 正常 工作 。 千 万 要 小 心 ! 


我 们 调用 .directive 并 创建 了 一 个 名 叫 'pincontrols ' 的 指令 。 这 是 一 种 标准 的 AngularJS 
实践 。 它 的 第 二 个 参数 是 指令 定义 对 象 (directive definition object，DDO )， 我 们 不 会 手动 创建 
DDO, ， 而 是 调用 upgradeAdapter .downgradeNg2Component o 











downgradeNg2Component 会 把 我 们 的 PinCcontrolsCcomponent 转换 成 与 AngularJS 兼 容 的 指 
4. 干净 ! 漂亮 ! 


刷新 一 下 ， 你 会 发 现 收 藏 功能 仍然 正常 工作 ( 如 图 16-8 所 示 )， 但 我 们 已 经 把 目前 的 实现 方 
3X E AngularJSrPi A Angular T ! 








图 16-8 ”收藏 功能 仍然 很 棒 


16.6.8 用 Angular 添加 图 钉 
接 下 来 要 用 Angular 组 件 对 添加 图 钉 的 页 面 进行 升级 ( 如 图 16-9 所 示 )。 


© / [ ng-book 2: interest 


i 








I€ © | D localhost:8080/#/add 


bt. 





Interest wnat you're interested in 


Home Add 


Title Steampunk Cat | 

Description Acat wearing goggles 
Link URL http://cats.com 

Image URL /images/pins/cat jpg 


Submit 








图 16-9 ”新 增 图 钉 的 表单 
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回想 一 下 ， 这 个 页 面 一 共 做 了 三 件 事 : 

(1) 为 用 户 提供 一 个 用 来 描述 这 个 图 钉 的 表单 ; 

(2) 借助 PinsService 把 新 的 图 钉 添 加 到 图 钉 列 表 中 ; 

(3) 把 用 户 重 定向 到 首页 。 

我 们 来 看 看 该 如 何在 Angular 中 做 到 这 些 。 

Angular 提 供 了 一 个 强力 的 表单 库 ， 所 以 这 没什么 难度 。 那 我 们 就 来 写 一 个 正统 的 Angular 表 
单 吧 。 

不 过 , PinsService 仍 然 来 自 AngularJS。 通 常 ， 我 们 会 有 很 多 来 自 AngularJS 的 既 有 服务 ,但 
又 没 那么 多 时 间 把 它们 都 改写 成 Angular 的 。 因 此 在 这 个 例子 中 , 我 们 仍然 把 PinsService 保 留 为 
AngularJS 对 象 ， 并 把 它 注入 到 Angular 中 。 

与 之 类 似 ， 我 们 把 来 自 AngularJS 的 ui-router 作 为 路 由 系统 。 要 想 在 ui-router 中 进行 页 面 
跳 转 ， 就 得 使 用 $state 服 务 ， 它 是 一 个 AngularJS 服 务 。 

那么 ， 在 这 里 要 做 的 就 是 把 PinsService 和 $state 服 务 从 AngularJS 升 级 到 Angular， 这 已 经 
是 最 简易 的 方式 了 。 















































16.6.9 把 AngularJS 的 PinsService 和 $state 升级 到 Angular 





要 想 升 级 AngularJS 的 服务 ， 我 们 可 以 调用 upgradeAdapter .upgradeNg1Provider。 


code/conversion/hybrid/ts/app.ts 

/* 

* Expose our AngularJS content to Angular 

*/ 
upgradeAdapter . upgradeNg1Provider( 'PinsService'); 
upgradeAdapter . upgradeNg1Provider( '$state'); 


这 样 就 足够 了 。 现 在 我 们 可 以 把 AngularJS 的 服务 注入 (e1n ject ) 到 Angular 的 组 件 中 ， 就 像 
这 样 : 
class AddPinComponent { 
constructor(GInject('PinsService') public pinsService: PinsService, 
GInject('$state') public uiState: IStateService) { 
j 
KÓÁ 5. 
// now you can use this.pinsService 
// or this.uiState 
P3 es 
j 


在 这 个 构造 函数 中 ， 有 几 点 需要 注意 。 
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@Inject 注 解 的 意思 是 ， 我 们 要 把 参数 中 指定 的 可 注入 对 象 解析 出 来 ， 赋 值 给 紧 随 其 后 的 变 
量 。 比 如 这 里 的 pinsService 将 被 赋值 为 我 们 在 AngularJS 中 定义 的 服务 PinsService。 


在 TypeScript 语 法 中 ， 在 constructor 中 使 用 public 关 键 字 其 实 是 一 种 简写 形式 ， 用 来 把 该 
变量 赋值 给 this。 也 就 是 说 ， 当 我 们 写 public pinsService 时 ， 其 实 是 在 做 两 件 事 : (1) 在 该 类 
上 定义 一 个 实例 属性 pinsService ; (2) 把 构造 函数 的 参数 pinsService 赋 值 给 this.pins- 
Service, 

最 终 的 效果 是 我 们 可 以 在 这 个 类 中 访问 this.pinsService 了 。 

最 后 ， 我 们 定义 了 所 注入 的 两 个 服务 的 类 型 : PinsService 和 IStateService。 

PinsService 来 自我 们 以 前 定义 过 的 app.d.ts。 






































code/conversion/hybrid/js/app.d.ts 


export interface PinsService { 
pins(): Promise«Pin[]»; 
addPin(pin: Pin): Promise«any»; 


} 








IStateServi ce 来 自 ui-router 的 类 型 文件 ; 它 是 我 们 以 前 用 typ ings 工 具 安装 的 。 


通过 把 这 些 服 务 的 类 型 信息 告诉 TypeScript， 我 们 在 写 代码 时 就 可 以 享受 类 型 检查 带 来 的 好 




















下 面 来 写 完 AddPinComponent 的 剩余 部 分 。 


16.6.10 5; Angular 版 的 AddPinComponent 
我 们 先 从 导入 所 需 的 类 型 信息 开始 。 





code/conversion/hybrid/ts/components/AddPinComponent.ts 
/* 


* AddPinComponent: a component that controls the "add pin" page 
*/ 
import { 
Component, 
Inject 
} from 'Gangular/core'; 
import { Pin, PinsService } from 'interestAppNg!'; 
import { IStateService } from 'angular-ui-router'; 


注意 ， 我 们 导入 了 自 定义 类 型 pin 和 PinsService ， 还 从 angular-ui-router 中 导入 了 


IStateService。 


1. AddPinComponent 的 @Component 


这 个 ecomponent 注 解 非常 简明 。 
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code/conversion/hybrid/ts/components/AddPinComponent.ts 


GComponent( { 

selector: 'add-pin', 

templateUrl: '/templates/add-Angular.html' 
I» 


2. AddPinComponent 模 板 


我 们 使 用 kemplateUr1 来 加 载 模板 。 在 该 模板 中 ， 我 们 的 表单 和 AngularJS 中 的 表单 非常 像 ， 
但 所 用 的 是 Angular 的 表单 指令 集 。 





我 们 在 这 里 不 准备 深入 讲解 hgModel/ngSubmit。 如 果 你 想 深入 了 解 Angular 表 单 
的 工作 原理 ,请 阅读 第 5 章 ， 我们 在 那里 对 表单 进行 了 详细 讲解 。 


code/conversion/hybrid/templates/add-Angular.html 


«div classz"container"» 
«div class="row"> 


«form (ngSubmit)-"onSubmit()" 
class-"form-horizontal"» 


«div class-"form-group"» 
«label for-"title" 
class-"col-sm-2 control-label"»Title«/label» 
«div class-"col-sm-10"» 

«input type="text" 
class-"form-control" 
id-"title" 
name-"title" 
placeholder-"Title" 
[(ngModel)]2"newPin.title"» 

«/div» 


这 里 使 用 了 两 个 指令 : ngSubmit fllngModel 。 


我 们 在 表单 上 使 用 了 (ngsubmit)。 这 样 当 表单 被 提交 时 ， 就 会 调用 onsubmit 函数 。( 我 们 会 
在 稍 后 的 AddPinComponent 控 制 器 中 定义 onSubmit 函数 。) 


我 们 使 用 [(ngMode1l)] 来 把 title 输 入 框 的 值 绑 定 到 控制 器 中 newPin.title 的 值 。 
下 面 是 完整 的 模板 代码 。 


code/conversion/hybrid/templates/add-Angular.html 

















«div class-z"container"» 
«div class="row"> 


«form (ngSubmit)-"onSubmit()" 
class-"form-horizontal"» 
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«div class-"form-group"» 
«label forz"title" 
class-"col-sm-2 control-label"»Title«/label» 
«div class-"col-sm-10"» 
«input type="text" 
classz"form-control" 
id-"title" 
name-z"title" 
placeholder-z"Title" 


[(ngModel)]2"newPin.title"» 
«/div» 


«/div» 


«div class-z"form-group"» 
«label for-'"description" 
class-"col-sm-2 control-label"»Description«/label» 
«div class-"col-sm-10"» 
«input type="text" 
class-"form-control" 
id-2"description" 
name-z"description" 
placeholderz"Description" 


[(ngModel)]2"newPin.description"» 
«/div» 


«/div» 


«div class-"form-group"» 
«label for="url" 
class-"col-sm-2 control-label"»Link URL«/label» 
«div class-"col-sm-10"» 
«input type="text" 
class-z"form-control" 
id-"url" 
name-z"url" 
placeholderz"Link URL" 


[(ngModel)]2"newPin.url"» 
«/div» 
«/div» 


«div classz"form-group"» 

«label for="url" 
class-"col-sm-2 control-label"»Image URL«/label» 

«div class-"col-sm-10"» 

«input type="text" 

classz"form-control" 
id-"url" 
name-z"url" 
placeholder-z"Image URL" 


[(ngModel)]2"newPin.srce"» 
«/div» 


«/div» 


«div class-"form-group"» 


«div class-"col-sm-offset-2 col-sm-10"» 
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«button type="submit" 
class="btn btn-default" 
»Submit«/button» 

«/div» 
«/div» 
«div xnglIfz"saving"» 
Saving... 
«/div» 
«/ form» 


3. AddPinComponent 控 制 器 
现在 我 们 就 可 以 定义 AddPinComponent 了 。 先 从 两 个 实例 变量 开始 。 


code/conversion/hybrid/ts/components/AddPinComponent.ts 


export class AddPinComponent { 
saving: boolean - false; 
newPin: Pin; 


saving 会 告诉 用 户 我 们 正在 进行 保存 ， 而 newPin 用 于 存储 我 们 正在 使 用 的 Pin 对 象 。 


code/conversion/hybrid/ts/components/AddPinComponent.ts 





constructor(GInject('PinsService') private pinsService: PinsService, 
GInject('$state') private uiState: IStateService) [f 
this.newPin = this.makeNewPin(); 


} 


如 前 所 述 ， 我 们 用 Inject 在 constructor 中 注入 了 这 些 服 务 ， 并 且 把 this .newPin 的 值 设置 
成 了 makeNewPin 5 也 就 是 下 面 这 个 函数 。 








code/conversion/hybrid/ts/components/AddPinComponent.ts 


makeNewPin(): Pin { 
return { 
title: 'Steampunk Cat', 
description: 'A cat wearing goggles', 
user name: 'me', 
avatar src: 'images/avatars/me.jpg', 
src: '/images/pins/cat.jpg', 
url: 'http://cats.com', 
faved: false, 
id: Math.floor(Math.random() * 10000).toString() 
5 
j 


这 看 起 来 很 像 AngularJS 中 的 定义 方式 ， 不 过 这 种 方式 现在 的 优点 在 于 它 是 带 类 型 信息 的 。 
当 用 户 提交 表单 时 ， 我 们 调用 onSubmit ， 其 定义 如 下 所 示 。 


code/conversion/hybrid/ts/components/AddPinComponent.ts 


onSubmit(): void { 
this.saving - true; 
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console.log('submitted', this.newPin); 
setTimeout(() => ( 
this.pinsService.addPin(this.newPin).then(() => ( 
this.newPin - this.makeNewPin(); 
this.saving - false; 
this.uiState.go('home'); 
35 
}, 2000); 
} 


我 们 再 次 使 用 超时 (timeout ) 技术 来 模拟 通过 向 服务 器 发 起 请 求 来 保存 图 钉 的 效果 。 这 里 我 
们 使 用 的 是 setTimeout 。 下 面 对 比 一 下 在 AngularJS 中 实现 同样 功能 的 写法 。 




















code/conversion/AngularJS/js/app.js 


ctrl.submitPin = function() { 
ctrl.saving - true; 
$timeout(function() ( 
PinsService.addPin(ctrl.newPin).then(function() { 
ctrl.newPin - makeNewPin(); 
ctrl.saving - false; 
$state.go('home'); 


Fs 
}, 2000); 


} 

注意 ， 我 们 在 AngularJS 中 必须 使 用 $timeout 服 务 。 为 什么 呢 ? 这 是 因为 AngularJS 是 基于 搞 

要 循环 (digestloop) 的 。 如 果 你 在 AngularJS 中 直接 使 用 setTimeout ， 那 么 当 调用 回调 函数 时 ， 
它 会 处 于 Angular 的 控制 范围 之 外 。 因 此 改动 造成 的 影响 不 会 扩散 出 来 ， 除 非 某 些 代码 触发 了 摘 
要 循环 ( 比如 使 用 $scope .apply )。 


然而 在 Angular 中 ， 你 可 以 直接 使 用 setTimeout ， 因 为 Angular 中 的 变更 检测 使 用 的 是 Zones , 
所 以 更 加 自动 化 。 你 再 也 不 用 担心 摘要 循环 了 ， 这 太 好 了 ! 
在 onSubm 让 中 ， 我 们 通过 下 列 代 码 调用 了 PinsService : 


this.pinsService.addPin(this.newPin).then(() => ( 


INT a 




































































PinsService 可 以 通过 this.pinsService 来 访问 ， 因 为 我 们 定义 constructor 时 使 用 了 特殊 
写法 。 编 译 器 没有 报错 ， 这 是 因为 我 们 已 经 在 app.d.ts 中 声明 过 addPin 接 收 一 个 Pin 对 象 作为 第 一 
个 参数 。 

















code/conversion/hybrid/js/app.d.ts 


export interface PinsService { 
pins(): Promise«Pin[]»; 
addPin(pin: Pin): Promise«any»; 


} 
我 们 还 把 this .newPin 定 义 成 了 一 个 Pin 对 象 。 
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addPin 解 析 完 成 后 ， 我 们 把 this.newPin 重 置 为 this.makeNewPin() 的 结果 ， 并 设置 this . 
saving = false, 

要 返回 首页 ， 就 要 使 用 ui-router 的 $state 服 务 。 我 们 已 经 通过 依赖 注入 把 它 存储 到 了 
this.uiState 属 性 中 ， 所 以 可 以 直接 调用 tnis.uiState.go( 'home') 来 变更 状态 。 






































16.6.11 使 用 AddPinComponent 
我 们 现在 就 来 使 用 AddqPinComponent 。 
1. 降级 Angular 的 AddPinComponent 
要 想 使 用 AddPinComponent ， 就 得 先 把 它 降级 。 














code/conversion/hybrid/ts/app.ts 


angular.module('interestApp') 
.directive('pinControls', 
upgradeAdapter .downgradeNg2Component(P inControlsComponent)) 
.directive( 'addPin', 
upgradeAdapter .downgradeNg2Component ( AddP i nComponent ) ) ; 


这 会 在 AngularJS 中 创建 一 个 addPin 指 令 ， 它 会 匹配 caddq-piny> 标 签 。 
2. 路 由 到 add-pin 


为 了 使 用 这 个 新 的 AddPinComponent 页 ， 就 要 把 它 放 进 AngularJS 应 用 中 的 某 个 地 方 。 这 很 简 
单 ， 只 要 让 路 由 器 拿 到 这 个 adqd 状 态 ， 并 把 caddq-piny 指令 放 到 模板 中 就 可 以 了 。 

















code/conversion/hybrid/js/app.js 


.state('add', { 
template: "«add-pin»«/add-pin»", 
url: '/add', 
resolve: { 
'pins': function(PinsService) [f 
return PinsService.pins(); 
} 
} 
}) 


16.6.12 把 Angular 的 服务 暴露 给 AngularJS 


目前 ， 我 们 已 经 降级 了 Angular 的 组 件 使 其 能 用 在 AngularJS 中 ， 还 升级 了 AngularJS 的 服务 使 
其 能 用 在 Angular 中 。 但 是 当 我 们 的 应 用 开始 升级 到 Angular 时 ， 可 能 会 需要 用 TypeScript/Angular 
写 一 些 服 务 ， 并 把 它 暴 露 给 AngularJS 的 代码 。 


那么 我 们 就 在 Angular 中 创建 一 个 简单 的 “分 析 ”( analytics ) 服务 ， 用 来 记录 事件 。 
我 们 的 想法 是 : 在 应 用 中 有 一 个 AnalyticsService, 我 们 将 调用 它 的 recordEvent 方 法 。 在 
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具体 实现 上 ， 我们 只 会 调用 console.1og 来 记录 该 事件 ， 并 把 它 存 到 一 个 数组 中 。 这 样 做 是 为 了 
把 精力 集中 在 最 重要 的 事情 上 : 描述 如 何 把 Angular 的 服务 共享 给 Angular]S。 











16.6.13 E AnalyticsService 
我 们 先 来 看 看 AnalyticsService 的 实现 。 





code/conversion/hybrid/ts/services/AnalyticsService.ts 


import { Injectable } from 'Gangular/core'; 


/** 
* Analytics Service records metrics about what the user is doing 
*/ 

@Injectable() 

export class AnalyticsService { 
events: string[] = []; 


public recordEvent(event: string): void { 
console.log(`Event: ${event}`); 
this.events.push(event); 
j 
j 


export var analyticsServiceInjectables: Array«any» - [ 
{ provide: AnalyticsService, useClass: AnalyticsService } 


]; 





这 里 需要 注意 两 点 : recordEvent 和 I njectable。 








recordEvent 很 简明 : 我 们 接收 一 个 event: string 参 数 ， 输 出 它 的 日 志 ， 并 且 把 它 保存 到 
events Fo 在 现实 世界 的 应 用 中 , 你 可 能 会 把 它 发 给 某 个 外 部 服务 , 比如 Google 分 析 或 Mixpanel。 


要 让 该 服务 可 注入 ， 我 们 得 做 两 件 事 : (1) 为 该 类 添加 eInjectable 注 解 ; (2) 把 
AnalyticsService 这 个 令 牌 pind 到 该 类 。 


现在 ，Angular 将 会 管理 该 服务 的 单 例 对 象 ， 而 我 们 可 以 把 它 注入 到 任何 需要 它 的 地 方 了 。 









































16.6.14 把 Angular 的 AnalyticsService 降级 到 AngularJS 


在 AngularJS 中 使 用 AnalyticsService 服 务 之 前 ， 我 们 需要 把 它 降 级 。 


巴 Angular 服 务 降 级 到 AngularJS 的 过 程 和 指令 的 降级 过 程 很 相似 ， 只 不 过 多 出 了 一 个 额外 的 
步骤: 得 先 确 保 AnayticsService 出 现在 了 我 们 这 个 NgModule 的 providers 列 表 中 。 








A 








code/conversion/hybrid/ts/app.ts 


GNgModule(Í 
declarations: [ 
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PinControlsComponent, 
AddPinComponent 

l, 

imports: [ 
CommonModule, 
BrowserModule, 
FormsModule 

], 

providers: [ 
AnalyticsService, 

] 


}) 
class InterestAppModule { } 


然后 就 可 以 使 用 downgradeNg2Provider To 








code/conversion/hybrid/ts/app.ts 





angular .module('interestApp') 
.factory('AnalyticsService', 
upgradeAdapter.downgradeNg2Provider(AnalyticsService)); 


我 们 先 调用 angular .module('interestApp ' ) 来 取得 AngularJS 的 模块 ， 然 后 像 在 AngularJS 
中 一 样 调用 . factory 。 要 想 降级 该 服务 ， 要 调用 upgradeAdapter .downgradeNg2Provider 
(AnalyticsService), 它 会 把 我 们 的 AnalyticsService 包 装 到 一 个 函数 中 ， 而 该 函数 会 把 它 适 
配 成 一 个 AngularJS 的 工厂 〈factory )。 


16.6.15 在 AngularJS 中 使 用 AnalyticsService 





现在 就 可 以 把 Angular 的 AnalyticsService 注 入 到 AngularJS 中 去 了 。 假 如 我 们 想 记 录 
HomeController 是 什么 时 候 被 访问 的 ， 就 可 以 像 下 面 这 样 来 记录 此 事件 。 











code/conversion/hybrid/js/app.js 


.controller('HomeController', function(pins, AnalyticsService) { 
AnalyticsService.recordEvent( 'HomeControllerVisited'); 
this.pins - pins; 


}) 
这 里 注入 了 AnalyticsService ， 就 像 它 是 AngularJS 中 的 普通 服务 一 样 ， 然 后 调用 
recordEvent 。 真 棒 ! 


我 们 可 以 在 AngularJS 中 任何 能 使 用 依赖 注入 的 地 方 使 用 该 服务 。 比 如 ， 我 们 也 可 以 把 
AnalyticsService 注 入 到 AngularJS 的 pin 指 令 中 。 























code/conversion/hybrid/js/app.js 


.directive('pin', function(AnalyticsService) { 
return { 
restrict: 'E', 
templateUrl: '/templates/pin.html', 
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scope: { 
'pin': "zitem" 
ky 
link: function(scope, elem, attrs) { 
scope.toggleFav = function() { 
AnalyticsService.recordEvent('PinFaved'); 
scope.pin.faved = !scope.pin. faved; 
} 
} 
} 
}) 


16.7 ”总结 


现在 我 们 掌握 了 把 AngularJS 应 用 升级 到 AngularJS/Angular 混 合式 应 用 时 所 需 的 工具 。 
AngularJS 和 Angular 之 间 也 有 非常 好 的 互 操作 性 ,这 是 因为 Angular 开 发 组 付出 了 很 多 努力 来 对 其 
进行 简化 。 

AngularJS 和 Angular 的 指令 与 服务 之 间 能 够 互通 ， 让 应 用 升级 变 得 非常 容易 。 当 然 ， 我 们 不 


可 能 一 夜 之 间 就 把 AngularJS 的 应 用 升级 到 Angular， UpgradeAdapter 能 让 我 们 不 必 把 那些 老 
代码 扔 掉 就 开始 使 用 Angular。 











16.8 ”参考 资源 


如 果 你 想 了 解 关于 混合 式 Angular 应 用 的 更 多 知识 ， 可 以 参阅 下 列 资源 。 


口 官方 的 Angular 升 级 指南 (中文 版 ): https://angular.cn/docs/ts/latest/guide/upgrade.html 

口 Angular 升级 模块 的 单元 测试 : https://github.com/angular/angular/blob/master/modules/ 
angular2/test/upgrade/upgrade spec.ts 

口 Angular 中 DowngradeNg2ComponentAdapter 的 源 代 码 : https://github.com/angular/angular/ 
blob/master/modules/angular2/src/upgrade/downgrade Angular adapter.ts 
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JavaScript 这 门 语言 简单 易 用 ， 很 容易 上 手 ， 但 其 语言 机 制 复 杂 微 妙 ， 即 使 是 经 验 
的 ES 丰富 的 JavaScript 开 发 人 员 ， 如 果 没 有 认真 学 习 的 话 也 无 法 真正 理解 。“ 你 不 知道 









































的 JavaScript” 系 列 就 是 要 让 不 求 甚 解 的 JavaScript 开 发 者 迎 难 而 上 ， 深 入 语言 内 
Fr 

你 不 知道 的 部 ， 开 清楚 JavaScript 每 一 个 零 部 件 的 用 途 。 
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